각진 2 구성 요소 다형성

Question

동적으로 추가되는 하위 구성 요소가있는 컨테이너처럼 작동하는 구성 요소를 구현하고 싶습니다. 하위 구성 요소의 유형과 수는 서버 측에서 구성되어야합니다.

export class ModelBase { 
    public data: any; 
} 

export class ModelA extends ModelBase { 
    public dataA: any; 
} 

export class ModelB extends ModelBase {  
    public dataB: any 
} 

단순화 된 구성 요소는 다음과 같이 수 :

그래서 모델 형태의 서버는 다음과 같이 할 수 도착

@Component({ 
    selector: "component-base" 
}) 
export class BaseComponent { 
    @Input() model: ModelBase; 
} 

@Component({ 
    selector: "component-a", 
    template: "<div>component-a</div>" 
}) 
export class AComponent extends BaseComponent { 
    @Input() model: ModelBase; 
} 

@Component({ 
    selector: "component-b", 
    template: "<div>component-b</div>" 
}) 
export class BComponent extends BaseComponent { 
    @Input() model: ModelBase; 
} 

을 그리고 여기에 응용 프로그램 만 내 구성 요소와 함께 일하고 싶습니다 방법 :

@Component({ 
     selector: 'app', 
     template: ` 
      <div *ngFor="#model of models"> 
       <component-base [model]="model"></component-base> 
      </div> 
     ` 
}) 
export class App { 
} 

내가 원하는 '구성 요소 -베이스'는 콘크리트로 대체됩니다. 구현은 '모델'유형을 기반으로합니다. 예를 들어 component-a. 각도 2로 워크 플로우를 구현할 수 있습니까?

Answer 1

이 기능을 더 잘 구현할 수있는 API가있을 수 있습니다 : https://github.com/angular/angular/pull/11235.

그동안은 https://stackoverflow.com/a/36325468/5307109을 확인하십시오. 데이터를 대상 구성 요소로 전달하고로드시 사용자 정의 구성 요소 후크를 호출 할 수 있도록이를 수정해야 할 수 있습니다.

위에서 설명한 래퍼를 사용하면 ComponentBase은 고유 한 템플릿을 가지며 각 모델의 관련 구성 요소를 래퍼에 주입합니다.

export class ModelA extends ModelBase { 
    dataA: any; 
    component: any = AComponent; 
} 

@Component({ 
    selector: "component-base", 
    template: ` 
    <dcl-wrapper [type]="model.component" [init-data]="model"></dcl-wrapper> 
    ` 
}) 
export class BaseComponent { 
    @Input() model: ModelBase; 
} 

@Component({ 
    selector: "component-a", 
    template: "<div>component-a</div>" 
}) 
export class AComponent { 
    @Input() model: ModelBase; 

    /** 
    * Custom hook you might create in DclWrapper. 
    */ 
    onDclInit(model: ModelBase) : void { 
    this.model = model; 
    } 

}