如何处理 Angular 中嵌套的 ng-template

Question

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

这是我在父级中传递模板的方式

<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 一起使用。

目前正在使用 Angular 10.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-datatable 包装器，所以你只需要将列作为输入发送到该包装器。

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

示例来自此处的演示 Ngx-datatable Examples

这里有文档Doc

如何处理 Angular 中嵌套的 ng-template

How to deal with nested ng-template in Angular

ng-template

angular-components

ngx-datatable

angular

angular-dynamic-components