angular - 将一个组件插入另一个父组件并传递数据

Question

是否可以将一个组件插入到另一个父组件中，并从父组件向子组件传递数据？

1. 用户组件
2. 表格组件
3. 详细信息组件

在 user.html 中

<app-table>
  <app-detail></app-detail>
</app-table>

在table.html中

<div *ngFor="let item of items">
  <ng-content [item]="item"></ng-content> (its my problem)
</div>

Answer 1

您可以使用ngTemplateOutlet: https://angular.io/api/common/NgTemplateOutlet

<app-user>
  <app-table [cardTemplate]="pCard"></app-detail>
</app-user>

<ng-template let-record #pCard>
    <div class="card">

    </div>
</ng-template>

表格组件:

<div class="nsCard">
    <ng-container *ngTemplateOutlet="cardTemplate; context:{$implicit: record}"></ng-container>
</div>

以及内部表格组件:

@Input() cardTemplate: TemplateRef<any>;

实际上它是 ng-template 的更高级形式，提供传递数据和许多其他功能的能力。