Полиморфизм угловых 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 { 
} 

Я хочу, чтобы «компонентная база» была заменена бетоном реализация на основе типа модели. Например, с компонентом-a. Есть ли такой рабочий процесс, который можно реализовать с помощью Angular 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; 
    } 

}