我目前正在使用Angular 4和Kendo UI進行Angular項目。 (工具欄,分頁,頁腳模板,...)Angular 2 Kendo UI將列定義傳遞給來自父組件的網格
我決定用我們網格的默認配置製作一個組件,所以我們沒有這個網格。相同的代碼遍佈整個地方。
所有網格之間的主要區別是列定義。所以我的想法是將它們作爲內容傳遞給我的包裝器組件,並在我的劍道網格中添加ng內容。
所以我現在所擁有的:
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獲取列,但是這個集合是空的。
有沒有人有一個想法是什麼問題?或者有關如何做得更好的建議?
最好的問候, BillieTK。