将一个组件插入另一个父组件并传递数据 [英] Insert a component into another parent component and pass data
本文介绍了将一个组件插入另一个父组件并传递数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以将一个组件插入另一个父组件并将数据从父组件传递到子组件?
Is it possible to insert a component into another parent component and pass data to the child component from the parent component?
- 用户组件
- 表组件
- 详细信息组件
在user.html
in user.html
<app-table>
<app-detail></app-detail>
</app-table>
在table.html
in table.html
<div *ngFor="let item of items">
<ng-content [item]="item"></ng-content> (its my problem)
</div>
推荐答案
您可以使用 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
的更高级形式,具有传递数据和许多其他数据的功能.
Actually it is more advanced form of ng-template
, that provides ability to pass data and many others.
这篇关于将一个组件插入另一个父组件并传递数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文