Modello dinamico "transclusione" in Angular2

Question

Sto cercando di ottenere qualcosa del genere: Ho una classe di modello chiamata ObjectTypeA, ObjectTypeB e ObjectTypeC. C'è anche una fabbrica ComponentFactory, che in base al tipo di oggetto passato in creerà diverse componenti:

ComponentFactory.ts

export interface ComponentFactoryInterface { 

    static CreateComponent(obj: CommonSuperObject) 

} 

@Injectable() 
export class ComponentFactory { 

    public static CreateComponent(obj: CommonSuperObject){ 

     if (obj instanceof ObjectTypeA){ 
      return ObjectComponentA() 
     }else if (obj instanceof ObjectTypeB){ 
      return ObjectComponentB() 
     } 

    } 
} 

Nel modello vorrei fare qualcosa di simile a questa:

main_template.html

<components> 
    <component *ngFor="#obj in objects"> 
    <!-- insert custom component template here --> 
    </component> 
</components> 

Come si inseriscono dinamicamente i componenti associati?

ho potuto fare qualcosa di simile (non è il mio modo preferito di farlo):

<components> 
    <!-- loop over component models --> 
    <custom-component-a *ngIf="models[i] instanceof ObjectTypeA"> 
    </custom-component-a> 
    <custom-component-b *ngIf="models[i] instanceof ObjectTypeB"> 
    </custom-component-b> 
</components> 

Ma questo è sembra davvero sbagliato a me su molti livelli (avrei dovuto modificare il codice e il codice di fabbrica se aggiungo un altro tipo di componente).

Edit - Esempio di lavoro

constructor(private _contentService: ContentService, private _dcl: DynamicComponentLoader, componentFactory: ComponentFactory, elementRef: ElementRef){ 

    this.someArray = _contentService.someArrayData; 
    this.someArray.forEach(compData => { 
    let component = componentFactory.createComponent(compData); 
     _dcl.loadIntoLocation(component, elementRef, 'componentContainer').then(function(el){ 
      el.instance.compData = compData; 
     }); 
    }); 

} 

Answer 1

aggiornamento

DCL è deprecato da un po '. Utilizzare invece ViewContainerRef.createComponent. Per un esempio (con Plunker) vedere Angular 2 dynamic tabs with user-click chosen components

originale

È possibile utilizzare ngSwitch (simile alla vostra soluzione, ma più conciso) o DynamicComponentLoader

Vedi anche

• https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html
• How to use angular2 DynamicComponentLoader in ES6?