将 Kendo Angular 网格列模板传递给托管网格的父组件答案

【问题标题】：Passing Kendo Angular grid column templates to a parent component hosting the grid将 Kendo Angular 网格列模板传递给托管网格的父组件
【发布时间】：2018-08-17 23:06:31
【问题描述】：

我在 Telerik Kendo Angular UI forum 上提出了这个问题，如果我得到答案，我会更新这两个位置，但这个问题可能是由于我有限的 Angular 知识而不是 Kendo 功能。

我的目标是让一个组件“grid-user”将列模板（kendoGridCellTemplate、kendoGridHeaderTemplate 等）传递给承载该元素的父“grid-provider”组件，以便多个网格用户可以呈现相同的网格无需各自配置分页、排序等

我的应用程序提供了搜索不同种类产品的功能。所有搜索结果都显示在 Angular 网格的 Kendo UI 中。每种产品都有不同的字段显示在搜索结果中，但网格的一般功能始终相同。我想定义一次网格，但让不同的搜索提供者提供自己的列配置和数据。但是到目前为止，当<ng-template kendoGridCellTemplate> 等直接嵌套在<kendo-grid-column> 元素下时，我只能提供标题、过滤器和单元格模板，而<kendo-grid-column> 元素直接嵌套在<kendo-grid> 元素下——所有这些都在同一个模板中。

请看这个例子：https://stackblitz.com/edit/angular-htffqq

第一个网格配置正确，但单元格模板位于<kendo-grid-column> 和<kendo-grid> 的正下方。第二个网格显示默认配置，无法识别@ContentChild提供的模板，默认为无配置。

是否可以以这种方式配置列？我尝试了许多略有不同的方法，但似乎没有任何区别，所以我开始认为这根本不可能。

【问题讨论】：

标签： angular kendo-ui kendo-grid angular-template kendo-angular-ui

【解决方案1】：

我不认为网格可以选择以这种方式提供的模板。至少我无法从投影内容中选择任何带有 ContentChild 或 ContentChildren 的内容。您可以使用我建议的方法here - 在 GridProvider 组件中获取 TemplateRef 并在列模板中使用 ngTemplateOutlet 呈现它：

https://stackblitz.com/edit/angular-htffqq-ngmlgw?file=app/grid-provider.component.ts

【讨论】：

感谢您的意见，我在发布之前阅读了您的回答，最初认为这在我的情况下不可行。但是，您在 stackblitz 上的代码编辑使其更加清晰。我会在星期一试试这个
再次感谢，我扩展了您的示例，以便 grid-provider 组件可以为每个字段找到适当的模板。每个 grid-user-provider 模板对都包装在一个 grid-column 组件中，这样它就可以被 grid-provider 正确识别，它还可以识别没有提供模板的列：stackblitz.com/edit/angular-htffqq-p8wies

【解决方案2】：

按照@SiliconSoul 的示例，首选解决方案在这里：https://stackblitz.com/edit/angular-htffqq-p8wies

【讨论】：