![](/img/trans.png)
[英]Passing Kendo Angular grid column templates to a parent component hosting the grid
[英]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。
在以下位置得到了答案:
看看那里显示的塞子。 为我工作! GridComponent使用ContentChildren选择已定义的列,该列不适用于包含。 可能的解决方法-plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview – rusev 1月5日,8:51
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.