扩展Kendo Angular 2 UI组件并使用所有Kendo组件功能创建自己的组件包装器

Question

我想创建一个可以用其他组件包裹kendo-component的Angular 2组件。

类似于my-component.component.html

之类的东西

 <div class="my-component-wrapper"><br />
      <label>{{label}}<br />
        <mytooltipComp></mytooltipComp><br />
      </label><br />
    <kendo-dropdownlist<br />
        [data]="data"<br />
        [defaultItem]="defaultItem"<br />
        [textField]="'text'"<br />
        [valueField]="'value'"<br />
        [valuePrimitive]="true"<br />
        (ngModelChange)="updateData($event)"<br />
        (selectionChange)="handleSelection($event)"><br />
    </kendo-dropdownlist><br />   
   <div *ngIf="_dropdownControl.valid == false || this.value==null"><br />
        <p *ngIf="errorMsgShow">{{errorMsg}}</p><br />
      </div><br />
    </div><br />      

我的wrapper.ts文件的组件指令以下。

@Component({
   selector: 'my-Component',        
   templateUrl: './my-Component.component.html'
})        

现在要使用Kendo Component属性，我需要在wrapper.ts文件中重新定义相同例如@input（'Data'）数据：任何;

要使用我的扭曲组件，我需要以下代码

<my-Component
               [data]="genders"
               [label]="'mylable'"
               [isValidate]=true
               [showError]=true>
</my-Component>

我的问题是

由于[数据]已经是Kendo的属性

还包装了现有的Kendo组件，不允许我设置其他相关属性（例如过滤等）。因为我需要在wrapper.ts组件中再次定义相同的属性。

有什么办法可以在包装纸内使用剑道的全部能力？

Answer 1

决定将Kendo组件嵌入包装器中，您就可以将Kendo组件从页面模板中隔离，因此您别无选择，只能通过包装器传输属性。

>

如果您的数据来自包装器外部，则需要在包装器中定义@Input()数据。但是您也可以查询API以填写您的数据，并且可以在包装器中完成。

另外，请查看CustomValueAccessor，如果您希望它与Angular Forms集成并管理NGModel，则需要在自定义控件中实现。

您还可以通过创建基本下拉组件（将执行ControlValueAccessor实现并管理基本逻辑），并将其扩展到所需的每种类型的下拉列表。