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

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

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

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

<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

解决方法

创建包含模板的列数组。它可以是一个对象数组，如下所示：

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

在这种情况下，模板将是您的 app-list 组件中的模板。

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

您在 app-list 组件中使用 ViewChild 访问您的模板

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

如果我理解正确的话，您的子组件实际上是 ngx-datatable 包装器，因此您只需要将列作为输入发送到该包装器。

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

此处的演示示例Ngx-datatable Examples

此处的文档Doc