Question

PrimeNG Table使用正文和标题模板来呈现表。我创建了包装PrimeNG表的组件。如何通过组件将ng-template传递给p-table？

Answer 1

PrimeNG documentation很好地显示了这一点。例如

<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>

在这里您可以看到 body 和 header 模板已使用pTemplate指令进行了标记。
p-table将能够通过ng-container和结构性指令ngTemplateOutlet来拾取和使用它们。

您可以找到源代码here。

@ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate>;

Answer 2

您可以使用ng-content将html代码传递到组件

将此代码视为自定义组件

<div> 
 <ng-content> </ng-content>
</div>

现在我们使用它

<custom-component>
whatever is written here will be placed where ng content is 
</custom-component>

通过组件传递ng-template

2 个答案: