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

我想创建一个Angular 2组件,它可以用一些其他组件包装kendo-component .

像my-Component.component.html下面的东西

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

我的wrapper.ts文件有下面的组件指令 .

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

现在使用kendo组件属性我需要在我的wrapper.ts文件中重新定义它,例如@Input('data')数据:any;

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

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

我的问题是

由于[data]已经是kendo的属性,我不想在wrapper.ts中重新定义 .

还包装现有的kendo组件,不允许我设置其他与kendo相关的属性,如过滤等,我需要再次在wrapper.ts组件中定义相同的属性 .

有什么办法可以在我的包装器中使用完全的kendo功能吗?

回答(1)

3 years ago

一旦决定在包装器中嵌入kendo组件,就可以将kendo组件与页面模板隔离开来,因此除了通过包装器传输属性之外别无选择 .

如果您的数据来自包装器外部,则需要在包装器中定义 @Input() 数据 . 但您也可以查询API来填充数据,这可以在包装器内完成 .

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

您还可以通过创建基本下拉组件(将执行ControlValueAccessor实现并管理基本逻辑)以及为您需要的每种类型的下拉列表扩展它来从继承中受益 .