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为那些指令所做的相同名称，并简单地添加了前缀＆＃34;＃＆＃34;但你可以使用任何你喜欢的名字。

将模板传递给封装的网格列

1 个答案: