[英]Pass ng-template through component
PrimeNG Table使用正文和标题模板来呈现表。 我创建了包装PrimeNG表的组件。 如何通过组件将ng-template传递给p-table?
PrimeNG 文档很好地显示了这一点。 例如
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td *ngFor="let col of cols">
{{car[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
在这里,您可以看到主体模板和标题模板是使用pTemplate
指令标记的。
p-table
将能够通过ng-container
和结构性指令ngTemplateOutlet
拾取并使用它们。
您可以在此处找到源代码。
@ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate>;
您可以使用ng-content
将html代码传递到您的组件
将此代码视为自定义组件
<div>
<ng-content> </ng-content>
</div>
现在我们用它
<custom-component>
whatever is written here will be placed where ng content is
</custom-component>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.