Angular 2 Kendo UI 将列定义从父组件传递到网格答案

【问题标题】：Angular 2 Kendo UI pass column definitions to grid from parent componentAngular 2 Kendo UI 将列定义从父组件传递到网格
【发布时间】：2017-05-04 14:43:11
【问题描述】：

我目前正在开发一个使用 Angular 4 和 Kendo UI for Angular 的项目。我们有多个剑道网格应该使用相同的配置。（工具栏、分页、页脚模板...）

我决定为我们的网格创建一个具有默认配置的组件，这样我们就不会到处都有相同的代码了。

所有网格之间的主要区别在于列定义。所以我的想法是将它们作为内容传递给我的包装器组件，并将 ng-content 添加到我的剑道网格中。

所以我现在拥有的：
main.component.ts

@Component({
    template: "<grid-wrapper>
                   <kendo-grid-column field="projectName">
                       <ng-template kendoGridHeaderTemplate>
                           <span>Project Name</span>
                       </ng-template>
                   </kendo-grid-column>
               </grid-wrapper>"
})
export class MainComponent {
}

wrapper.component.ts

@Component({
    template: "<div>
                   <!-- Some code for buttons shown above the grid -->
                   <kendo-grid [data]="data"
                               [pageSize]="pageSize"
                               [sortable]="{mode: 'single'}"
                       <ng-content></ng-content>
                       <!-- templates and components for paging, toolbar, ... -->
                   </kendo-grid>
               </div>",
    selector: "grid-wrapper"
})
export class WrapperComponent {
    private data: GridDataResult;
    private pageSize: number = 10;

    // ...
    // Some code for filling the data
    // ...
}

在调试剑道网格时，我注意到 GridComponent 获取了带有@ContentChildren 的列，但是这个集合是空的。

有人知道出了什么问题吗？或者有什么建议可以做得更好？

最好的问候，比利TK。

【问题讨论】：

标签： angular typescript kendo-ui-angular2

【解决方案1】：

得到了答案：

kendo component encapsulation template/component use

看看那里显示的 plunker。 为我工作！ GridComponent 使用 ContentChildren 来选择定义的列，这不适用于嵌入。一种可能的解决方法 - plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview – rusev 1 月 5 日 8:51

【讨论】：