通过组件传递 ng-template答案

【问题标题】：Pass ng-template through component通过组件传递 ng-template
【发布时间】：2019-08-21 15:39:51
【问题描述】：

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

【问题讨论】：

标签： javascript angular typescript primeng primeng-turbotable

【解决方案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>;

【讨论】：

但是p-table会在他的自定义组件中声明，header和body模板会在父组件中声明。他将如何做到这一点？

【解决方案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>

【讨论】：

您确定它可以正常工作吗？不适合我
是的，你可以在这里看到参考angular.io/api/core/ng-content