繁体   English   中英

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

[英]Angular 2 Kendo UI pass column definitions to grid from parent component

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

我决定使用网格的默认配置来制作组件,因此我们到处没有相同的代码。

所有网格之间的主要区别是列定义。 所以我的想法是将它们作为内容传递给我的包装器组件,然后在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网格时,我注意到GridComponent使用@ContentChildren获取列,但是此集合为空。

有人知道出什么问题了吗? 或关于如何更好地做到这一点的任何建议?

最好的问候,BillieTK。

在以下位置得到了答案:

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

看看那里显示的塞子。 为我工作! GridComponent使用ContentChildren选择已定义的列,该列不适用于包含。 可能的解决方法-plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview – rusev 1月5日,8:51

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM