검도 각 2 UI 구성 요소 확장 및 모든 검도 구성 요소 기능이있는 자체 구성 요소 래퍼 만들기

Question

검도 구성 요소를 다른 구성 요소와 함께 감쌀 수있는 각도 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') 데이터 : any;

내가 다음 코드를 필요 내 뒤틀린 구성 요소를 사용하는

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

내 질문은 [자료] 내가 wrapper.ts에서 다시 정의하지 않으 검도의 속성이 이미으로

입니다.

또한 다른 검도 관련 속성을 필터링 등으로 설정하지 못하도록 기존 검도 구성 요소를 래핑하므로 wrapper.ts 구성 요소에서도 동일한 정의를 다시해야합니다.

내 래퍼에서 검도의 모든 기능을 사용할 수있는 방법이 있습니까?

Answer 1

검도 구성 요소를 래퍼에 포함하기로 결정한 후에는 검도 구성 요소를 페이지 템플리트에서 분리하여 래퍼를 통해 속성을 전송하는 것 외에 다른 선택 사항이 없습니다.

데이터가 래퍼 외부에서 오는 경우 랩퍼에 @Input() 데이터를 정의해야합니다. 그러나 데이터를 채우기 위해 API를 쿼리 할 수도 있고 래퍼 내부에서 수행 할 수도 있습니다.

또한 CustomValueAccessor를 확인하십시오. 사용자 지정 컨트롤을 앵귤러 폼과 통합하고 ngModel을 관리하려면 사용자 지정 컨트롤에 구현해야 할 것입니다.

기본 드롭 다운 구성 요소 (ControlValueAccessor 구현을 수행하고 기본 논리를 관리 함)를 생성하고 필요한 모든 드롭 다운 유형에 대해 확장하여 상속을 활용할 수도 있습니다.