扩展Kendo Angular 2 UI组件并创建我们自己的具有所有Kendo组件功能的组件包装器
扩展Kendo Angular 2 UI组件并创建我们自己的具有所有Kendo组件功能的组件包装器
提问于 2017-03-01 13:53:52
我想创建一个角度2组件，可以包装kendo组件与一些其他组件。
类似于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指令。
@Component({
selector: 'my-Component',
templateUrl: './my-Component.component.html'
}) 现在要使用剑道组件属性，我需要在我的wrapper.ts文件中重新定义它，例如@Input('data') data: any；
要使用我的扭曲组件，我需要以下代码
<my-Component
[data]="genders"
[label]="'mylable'"
[isValidate]=true
[showError]=true>
</my-Component>我的问题是
因为数据已经是剑道的属性了，所以我不想在wrapper.ts中重新定义。
还有现有剑道组件的包装，不允许我设置其他剑道相关属性，如过滤等，为此我需要再次在wrapper.ts组件中定义相同的属性。
有什么方法可以在我的包装器中使用剑道的全部功能吗？
回答 1
Stack Overflow用户
发布于 2017-03-15 18:21:50
一旦决定在包装器中嵌入kendo组件，就将kendo组件与页面模板隔离开来，因此除了通过包装器传输属性之外别无选择。
如果数据来自包装器之外，则需要在包装器中定义@Input()数据。但是您也可以查询API来填充您的数据，这可以在包装器中完成。
此外，请查看CustomValueAccessor，如果您希望它与Angular Forms集成并管理ngModel，则需要在您的自定义控件中实现它。
您还可以从继承中受益，方法是创建一个基本的dropdown组件(它将执行ControlValueAccessor实现并管理基本逻辑)，并为您需要的每种dropdown类型扩展它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42524228
复制相关文章
相似问题
腾讯云开发者
