如何通过 <ngx-datatable-column> 在另一个组件包裹的内部， <ngx-datatable> ？

Question

我在我的组件中包含了一个<ngx-datatable>组件，我们称之为<app-table> ，以便在整个应用程序中使用一些标准配置。 问题是我无法在其中传递<ngx-datatable-column>并让它传递indside <ngx-datatable> 。 不抛出任何错误，它只是忽略传递的元素。

我用TemplateRef尝试了<ng-content>和<template> ，没有成功。 我怀疑<ngx-datatable>无法识别传递的元素，因为它已经在没有它的情况下进行了初始化。

<app-table [rows]="rows"
           [limit]="page.limit"
           [columns]="columns">
    <ng-container content>
        <ngx-datatable-column name="Actions">
            <ng-template let row="row"
                         let-value="value" 
                         ngx-datatable-cell-template>
                <button>...</button>
                <button>...</button>
            <ng-template>
         </ngx-datatable-column>
    </ng-container>
</app-table>

在app-table.component.ts里面

.
.
<ngx-datatable [configs]="...configs...">
    <!-- The column is never displayed in here -->
    <ng-content select="[content]"></ng-content>
</ngx-datatable>

任何帮助表示赞赏，提前谢谢！

Answer 1

您可以通过设置[ngTemplateOutletContext]将上下文对象附加到EmbeddedViewRef。 [ngTemplateOutletContext]应该是一个对象，该对象的键将可用于绑定本地模板的声明。

改变你的HTML。

<ngx-datatable [configs]="...configs...">
    <!-- The column is never displayed in here -->
       <ng-template [ngTemplateOutlet]="itemTemplate" *ngIf="itemTemplate" 
        [ngTemplateOutletContext]="{ $implicit: option }"></ng-template>
</ngx-datatable>

在ts文件中。通过在元素（或带前缀*的指令）上放置指令来访问TemplateRef实例

  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;

传递这样的价值

<app-table [rows]="rows"
           [limit]="page.limit"
           [columns]="columns">
    <ng-template>
        <ngx-datatable-column name="Actions">
            <ng-template let row="row"
                         let-value="value" 
                         ngx-datatable-cell-template>
                <button>...</button>
                <button>...</button>
            <ng-template>
         </ngx-datatable-column>
    </ng-template>
</app-table>