[英]Pass ng-template through component
PrimeNG Table takes body and header templates to render the table. PrimeNG Table使用正文和标题模板来呈现表。 I have created the component that wraps PrimeNG table.
我创建了包装PrimeNG表的组件。 How can I pass ng-template through my component to p-table?
如何通过组件将ng-template传递给p-table?
The PrimeNG documentation shows this nicely. PrimeNG 文档很好地显示了这一点。 Eg
例如
<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>
Here you can see the body and header templates are marked using the pTemplate
Directive. 在这里,您可以看到主体模板和标题模板是使用
pTemplate
指令标记的。
The p-table
will be able to pick them up and use them via ng-container
and the structural Directive ngTemplateOutlet
. p-table
将能够通过ng-container
和结构性指令ngTemplateOutlet
拾取并使用它们。
You can find the source code here . 您可以在此处找到源代码。
@ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate>;
you can use ng-content
to pass html code to your component 您可以使用
ng-content
将html代码传递到您的组件
consider this code as a custom component 将此代码视为自定义组件
<div>
<ng-content> </ng-content>
</div>
and now we use it 现在我们用它
<custom-component>
whatever is written here will be placed where ng content is
</custom-component>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.