kendo组件封装模板/组件使用 [英] kendo component encapsulation template/component use
问题描述
是否可以通过ng-content或TemplateRef或类似内容超越自定义列定义?我一直在通过网站上的Kendo UI Grid插件进行测试( http://www.telerik.com/kendo-angular-ui/components/grid/)以及
Is is possible to transclude custom column definitions via ng-content or TemplateRef or similar? I've been testing via Kendo UI Grid plunker available at site (http://www.telerik.com/kendo-angular-ui/components/grid/) as well as Angular2 child component as data but to no avail. I've also tried it ng-content select but also nothing. Any help is greatly appreciated, thanks!
@Component({
selector: 'test-component',
template:
`
<kendo-grid [data]="Data">
<kendo-grid-column></kendo-grid-column>
// ??? // <ng-content kendo-grid-column></ng-content> // [object Object]
// ??? // <kendo-grid-column ng-content></kendo-grid-column> // [object Object]
</kendo-grid>
`
})
export class TestComponent {
@Input() Data: any;
}
@Component({
selector: 'my-app',
template: `
<test-component [Data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230"></kendo-grid-column>
<kendo-grid-column field="Discontinued" width="120">
<template kendoCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</template>
</kendo-grid-column>
</test-component>
`
})
export class AppComponent { ... }
推荐答案
正如@rusev在之前的评论中所回答的...它将对我有用,谢谢!
As answered by @rusev in a comment prior ... this will work for me, thanks !
GridComponent使用
ContentChildren
选择已定义的列, 不适用于包容.可能的解决方法- plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview
The GridComponent is using
ContentChildren
to select defined columns, which does not work with transclusion. A possible workaround - plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview
这是答案,可以在plunkr中看到
This is the answer as can be seen in the plunkr
import { Component, Input, ContentChildren, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ColumnComponent, GridComponent } from '@progress/kendo-angular-grid';
const resolvedPromise = Promise.resolve(null); //fancy setTimeout
@Component({
selector: 'test-component',
template:
`
<kendo-grid [data]="Data">
</kendo-grid>
`
})
export class TestComponent {
@Input() Data: any[];
@ContentChildren(ColumnComponent) columns;
@ViewChild(GridComponent) grid;
constructor(private cdr: ChangeDetectorRef ) {}
ngAfterContentInit() {
resolvedPromise.then(() => {
this.grid.columns.reset(this.columns.toArray());
});
}
}
@Component({
selector: 'my-app',
template: `
<test-component [Data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID" width="120"></kendo-grid-column>
</test-component>
`
})
export class AppComponent { ... }
这篇关于kendo组件封装模板/组件使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!