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

Posted 2023-05-07

【中文标题】扩展 Kendo Angular 2 UI 组件并创建我们自己的具有所有 Kendo 组件功能的组件包装器

【英文标题】：Extending Kendo Angular 2 UI component and creating our own component wrapper with all Kendo component capabilities

【发布时间】：2017-07-20 08:06:11

【问题描述】：

我想创建一个 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') 数据：任意；

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

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

我的问题是

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

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

有什么方法可以在包装器中使用剑道的全部功能？

【参考方案1】：

一旦您决定将 kendo 组件嵌入到包装器中，您就将 kendo 组件与页面模板隔离开来，因此您别无选择，只能通过包装器传输属性。

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

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

您还可以从继承中受益，方法是创建一个基本下拉组件（它将执行 ControlValueAccessor 实现并管理基本逻辑），并将其扩展为您需要的每种下拉列表。