Angular 2 Kendo UI将列定义从父组件到网格

Question

我目前正在使用Angular 4和Kendo UI进行Angular进行项目。我们有多个应该使用相同配置的Kendo网格。(工具栏，分页，页脚模板，...(

我决定为我们的网格制作一个默认配置的组件，因此我们在整个地方都没有相同的代码。

所有网格之间的主要区别是列定义。因此，我的想法是将它们作为内容传递给我的包装组件，并在我的kendo网格中添加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
    // ...
}

在调试Kendo Grid时，我注意到GridComponent使用@ContentChildren获取列，但是此集合为空。

有人知道怎么了？或关于如何做得更好的任何建议？

最好的问候，Billietk。

Answer 1

在：

上得到答案

Kendo组件封装模板/组件使用

查看那里显示的plunker。为我工作！GridComponent使用ContentChildren选择定义的列，这与transclusion无效。可能的解决方法-plnkr.co/edit/w6egmzl5z8j6cvpjml2h？