将模板向下传递到封装的网格列

Question

我使用

在一个新组件中封装了一个 kendo-grid-column

<imx-gridColumn field="Count" title="Count">
...
</imx-gridColumn>

使用imx-gridColumn的组件模板化了

<kendo-grid-column #column field="{{field}}">
...
</kendo-grid-column>

到目前为止一切顺利。现在我喜欢做类似的事情

<imx-gridColumn field="Message" title="A longer message">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button (click)="ShowMessage(dataItem)">Show my message</button>
    </ng-template>
</imx-gridColumn>

将模板应用于此特定列。其他栏目使用kendo-grid-column提供的标准模板。

有没有简单的方法将ng-template 传递给kendo-grid-column？ 如果没有，我该如何更改列的内容，使用按钮而不是简单的文本？

编辑
经过一些研究，我能够使用至少包含一些数据的@ContentChild(TemplateRef) Template:TemplateRef<ElementRef> 提取模板。但现在我坚持将此模板推送到我的kendo-grid-column。

Answer 1

我终于找到了解决这个问题的方法，所以我想和其他人分享，他们可能会遇到和我一样的问题。
我不会发布完整的文件，而只会发布对解决方案很重要的部分。

GridColumn.component.ts

@Component({
    selector: 'imx-gridColumn',
    templateUrl: './GridColumn.component.html',
})

export class imx_GridColumnComponent
{
  ...
  @ContentChild('kendoGridCellTemplate') Template:TemplateRef<ElementRef>;
}

GridColumn.component.html

<kendo-grid-column field="{{field}}">
   ...
    <ng-template *ngIf="Template" kendoGridCellTemplate let-dataItem>
         <ng-container [ngTemplateOutlet]="Template" [ngTemplateOutletContext]="{$implicit:dataItem}"></ng-container>
    </ng-template>
</kendo-grid-column>

之后，您可以将模板传递给网格列：

<imx-gridColumn field="Message" title="A longer message">
    <ng-template #kendoGridCellTemplate let-dataItem>
        <button (click)="ShowMessage(dataItem)">Show my message</button>
    </ng-template>
</imx-gridColumn>

请注意，如果您想提供多个模板，则必须添加一个标识符才能获得要应用的正确模板。我使用了与 kendo 指令相同的名称，只是添加了前缀“#”，但你可以使用任何你喜欢的名称。