如何处理Angular中的嵌套ng模板

Question

我正在制作一个ngx-datatabel包装器，我想从父组件传递列模板。我正在通过ng模板出口做这件事。但由于某种原因，它没有被呈现出来。

以下是我如何在父中传递tempalate

<app-list>
<ng-template #customColumns>
<ngx-datatable-column name="age" >
<ng-template let-value="value" ngx-datatable-cell-template>
Test
</ng-template>
</ngx-datatable-column>
</ng-template>
</app-list>

这是子组件html

<ngx-datatable [rows]="rows" [columns]="cols">
<ng-container [ngTemplateOutlet]="customColumnsTemplate">
</ng-container>
</ngx-datatable>

子组件ts

@ContentChild('customColumns')
customColumnsTemplate: TemplateRef<any>;

如果我只是直接在子组件中复制粘贴模板，它可以很好地工作，但不适用于ngTemplateOutlet。

当前使用Angular110.1.6

Answer 1

创建一个包含模板的列数组。它可以是这样的对象数组：

let columns = [{ name: "Column Name", cellTemplate: someCellTemplate, headerTemplate: someHeaderTemplate...}]

在这种情况下，模板将是应用程序列表组件中的模板。

<ng-template #myCellTemplate let-row="row" let-column="column" let-value="value">
Test
</ng-template>

您可以使用ViewChild 访问应用程序列表组件中的模板

@ViewChild('myCellTemplate') myCellTemplate: TemplateRef<any>;

如果我理解得很清楚的话，您的子组件实际上是ngx数据表包装器，所以您只需要将列作为输入发送到该包装器。

<ngx-datatable [rows]="rows" [columns]="columns">
</ngx-datatable>

示例从他们的演示这里Ngx数据表示例

此处文档文档