Insert a component into another parent component and pass data

随声附和 提交于 2021-02-19 04:17:08

问题


Is it possible to insert a component into another parent component and pass data to the child component from the parent component?

  1. User Component
  2. Table Component
  3. Detail Component

in user.html

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

in table.html

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


回答1:


You can use 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>

Table component:

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

And inside table component:

@Input() cardTemplate: TemplateRef<any>;

Actually it is more advanced form of ng-template, that provides ability to pass data and many others.



来源:https://stackoverflow.com/questions/58292748/insert-a-component-into-another-parent-component-and-pass-data

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!