angular - 剣道コンポーネントのカプセル化テンプレート/コンポーネントの使用

Question

ng-content や TemplateRef などを介してカスタム列定義をトランスクルードすることは可能ですか? サイト ( http://www.telerik.com/kendo-angular-ui/components/grid/ )で利用可能な Kendo UI Grid plunkerとAngular2 子コンポーネントをデータとしてテストしましたが、役に立ちませんでした。ng-content select も試しましたが、何も試しませんでした。どんな助けでも大歓迎です、ありがとう！

@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

kendo-grid-columnで要素を選択するにはng-content、次を使用します。

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

この plunkrを参照してください。