访问 ng-container 中的子组件变量

Posted 2023-03-13

【中文标题】访问 ng-container 中的子组件变量

【英文标题】：Access child component variables within ng-container

【发布时间】：2019-08-15 23:35:27

【问题描述】：

我有一个名为 Suggestion List 的自定义组件，它从 observable 向用户显示建议列表。我已经尽可能通用地创建了这个组件，所以你可以传递任何数据数组，所以我希望能够从父级自定义它的显示，因为我永远不会知道对象会是什么样子，直到实施它。不幸的是，我无法从 ng-container 中的父级访问子组件变量。

这可以通过 ng-container 或 ng-template 实现，还是我应该完全采用另一条路线？

父组件

    <suggestion-list (suggestionSelected)="selectSuggestion($event)" [$suggestions]="$suggestionSource">
      <ng-container>
        suggestion.firstname + ' ' + suggestion.lastname
      <ng-container>
    </suggestion-list>

子组件

  <mat-list role="list">
    <mat-list-item *ngFor="let suggestion of $suggestions | async">
      <mat-icon mat-list-icon>person</mat-icon>
      <mat-card (click)="selectSuggestion(suggestion)">
        <ng-container></ng-container>
      </mat-card>
    </mat-list-item>
  </mat-list>

【参考方案1】：

一种方法是使用ng-template。您可以为父组件中的每个元素定义一个模板，并在子组件中为数组中的每个元素显示模板：

父组件：

<suggestion-list (suggestionSelected)="selectSuggestion($event)" 
                 [suggestions]="$suggestionSource | async" 
                 [suggestionTemplate]="suggestionTemplate">
</suggestion-list>

<ng-template #suggestionTemplate let-suggestion>
<span>suggestion.firstname + ' ' + suggestion.lastname</span>
</ng-template>

在您的子组件中，您可以这样做（请注意，我们通过 ng-template 的隐式上下文在模板中传递了建议变量：

<ng-container *ngFor="let suggestion of suggestions>
    <ng-container *ngTemplateOutlet="suggestionTemplate; context: $implicit: suggestion"></ng-container>
</ng-container>

在子组件的.ts文件中，声明传入的模板如下：

@Input() suggestionTemplate: TemplateRef<any>;

PS：我现在已经写了这段代码，所以它没有经过测试，但我想你可以知道你能做什么！

【讨论】：

这行得通，我唯一不同的是在子组件中：<mat-list role="list"> <mat-list-item *ngFor="let suggestion of suggestions"> <mat-icon mat-list-icon>person</mat-icon> <mat-card (click)="selectSuggestion(suggestion)"> <ng-container *ngTemplateOutlet="suggestionTemplate; context: $implicit: suggestion"></ng-container> </mat-card> </mat-list-item> </mat-list> 所以我可以保留我的 mat-list

【参考方案2】：

Here 是工作示例

parent.component.html

   <div>
     <suggestion-list (suggestionSelected)="selectSuggestion($event)" [$suggestions]="$suggestionSource">
       <p>suggestion.firstname + ' ' + suggestion.lastname</p>
     </suggestion-list>
   </div>

child.component.html

   <div>
     <ng-content></ng-content>
     <p>Hello !</p>
   </div>

【讨论】：

不幸的是这不起作用，父组件仍然不知道它的contex中的suggestions.firstname或lastname是什么

我为它添加了一个工作示例。但我们也必须考虑这一点，如果您从后端获取建议数据，您也必须使用 ng-container。