2017-05-04 94 views
0

我目前正在使用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。

回答

0

得到的答案爲:

kendo component encapsulation template/component use

看看那裏顯示的plunker。 爲我工作! GridComponent正在使用ContentChildren來選擇定義的列,這些列不支持跨越。可能的解決方法 - plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview - rusev 1月5日8:51

相關問題