首页 文章

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

提问于
浏览 次
2

我想创建一个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功能吗？

angular kendo-ui kendo-ui-angular2

1 回答

  • 1

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

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

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

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

    回复于

相关问题