如何處理 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 在 app-list 組件中訪問您的模板

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

如果我理解正確，您的子組件實際上是 ngx-datatable 包裝器，因此您只需將列作為輸入發送到該包裝器。

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

來自他們的演示示例 Ngx-datatable 示例

文檔在這里Doc