Вставьте компонент в другой родительский компонент и передайте данные

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, которая предоставляет возможность передавать данные и многие другие.