[英]Extending Kendo Angular 2 UI component and creating our own component wrapper with all Kendo component capabilities
我想创建一个Angular 2组件,它可以用一些其他组件包装kendo-component。
像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组件属性我需要在我的wrapper.ts文件中重新定义它,例如@Input('data')data:any;
使用我的扭曲组件我需要以下代码
<my-Component
[data]="genders"
[label]="'mylable'"
[isValidate]=true
[showError]=true>
</my-Component>
我的问题是
由于[data]已经是kendo的属性,我不想在wrapper.ts中重新定义。
还包装现有的kendo组件,不允许我设置其他与kendo相关的属性,如过滤等,我需要再次在wrapper.ts组件中定义相同的属性。
有什么办法可以在我的包装器中使用完全的kendo功能吗?
一旦决定在包装器中嵌入kendo组件,就可以将kendo组件与页面模板隔离开来,因此除了通过包装器传输属性之外别无选择。
如果您的数据来自包装器外部,则需要在包装器中定义@Input()
数据。 但您也可以查询API来填充数据,这可以在包装器内完成。
另外,请查看CustomValueAccessor,如果您希望它与Angular Forms集成并管理ngModel,则需要在自定义控件中实现它。
您还可以通过创建基本下拉组件(将执行ControlValueAccessor实现并管理基本逻辑)以及为您需要的每种类型的下拉列表扩展它来从继承中受益。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.