kendo组件封装模板/组件使用 [英] kendo component encapsulation template/component use

问题描述

是否可以通过 ng-content 或 TemplateRef 或类似方法嵌入自定义列定义?我一直在通过网站上提供的 Kendo UI Grid plunker 进行测试 (http://www.telerik.com/kendo-angular-ui/components/grid/) 以及 Angular2 子组件作为数据 但无济于事.我也试过 ng-content select 但也没有.非常感谢任何帮助，谢谢！

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屋！