擴展Kendo Angular 2 UI組件並使用所有Kendo組件功能創建我們自己的組件包裝

Question

我想創建一個可以將kendo組件與其他組件包裝在一起的Angular 2組件。

喜歡的東西

<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.html低於組件指令。

@Component({ 
    selector: 'my-Component',   
    templateUrl: './my-Component.component.html' 
})   

現在使用劍道組件屬性我需要在我wrapper.ts重新定義相同的文件 例如@Input（'data'）數據：任何;

用我的扭曲成分我需要下面的代碼

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

我的問題是

爲[數據]已經是我不想在wrapper.ts重新定義劍道的財產。

也包裝現有的劍道組件，不允許我設置其他劍道相關的屬性，如過濾等，因爲我需要在wrapper.ts組件中再次定義相同的屬性。

有沒有什麼方法可以在我的包裝中使用劍道的全部功能？

Answer 1

一旦你決定在包裝器中嵌入一個kendo組件，你可以從你的頁面模板中分離出kendo組件，所以除了通過你的包裝器傳遞屬性外，沒有別的選擇。

如果您的數據來自包裝外部，則需要在包裝器中定義@Input()數據。 但是你也可以查詢一個API來填充你的數據，這可以在包裝器中完成。

此外，請查看CustomValueAccessor，如果您希望它與Angular Forms集成並管理ngModel，則需要在自定義控件中實現該功能。

您還可以通過創建基本下拉組件（它將執行ControlValueAccessor實現並管理基本邏輯）並將其擴展爲您需要的每種類型的下拉列表，從而受益於繼承。