Расширение компонента пользовательского интерфейса Kendo Angular 2 и создание собственной оболочки компонентов со всеми возможностями компонентов Kendo

Question

Я хочу создать один компонент Angular 2, который может обернуть кендо-компонент другим компонентом.

Что-то вроде ниже 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.

Также обтекание существующего компонента кендо, не позволяющее мне устанавливать другие связанные с кендо свойства, такие как фильтрация и т. Д., Для этого мне нужно снова определить то же самое в компоненте wrapper.ts.

Можно ли как-нибудь использовать все возможности кендо внутри моей обертки?

Answer 1

Как только вы решите встроить компонент kendo в оболочку, вы изолируете компонент kendo от шаблона страницы, так что у вас нет другого выбора, кроме как передать свойства через оболочку.

Если ваши данные поступают извне, вам нужно определить @Input() данные в вашей обертке. Но вы также можете запросить API, чтобы заполнить ваши данные, и это можно сделать внутри оболочки.

Кроме того, проверьте CustomValueAccessor, это то, что вам нужно будет внедрить в свой пользовательский элемент управления, если вы хотите, чтобы он интегрировался с Angular Forms и управлял ngModel.

Вы также можете извлечь выгоду из наследования, создав базовый компонент раскрывающегося списка (который будет выполнять реализацию ControlValueAccessor и управляя базовой логикой), и расширив его для каждого типа раскрывающегося списка, который вам необходим.