Kendo-Komponente Encapsulation Vorlage/Komponente verwenden

Question

Ist es möglich, benutzerdefinierte Spaltendefinitionen über ng-Content oder TemplateRef oder ähnliches zu überführen? Ich habe über Kendo UI Grid-Plocker getestet auf der Website verfügbar (http://www.telerik.com/kendo-angular-ui/components/grid/) sowie Angular2 child component as data, aber ohne Erfolg. Ich habe es auch probiert, ng-content auszuwählen aber auch nichts. Jede Hilfe wird sehr geschätzt, danke!

@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 { ... } 

Answer 1

Wie @rusev in einem Kommentar vor beantwortet ... dies wird für mich arbeiten, danke!

Die GridComponent ContentChildren wird mit definierten Spalten auszuwählen, , die nicht mit Einbindung funktioniert. Eine mögliche Abhilfe - plnkr.co/edit/w6EgmZL5z8J6CvpjMl2h?p=preview

Dies ist die Antwort wie

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 { ... } 

Answer 2

Um die kendo-grid-column Elemente mit einer ng-content, Verwendung auswählen:

<ng-content select="kendo-grid-column"></ng-content> 

this plunkr See.