Dynamiczny szablon "transclusion" w Angular2

Question

Próbuję osiągnąć coś takiego: Mam klasy modelu o nazwie ObjectTypeA, ObjectTypeB i ObjectTypeC. Istnieje również fabryka ComponentFactory, który w zależności od rodzaju obiektu przekazany w stworzy różne składniki:

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() 
     } 

    } 
} 

W szablonie chciałbym zrobić coś takiego:

main_template.html

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

Jak dynamicznie wstawiać powiązane komponenty?

mógłby zrobić coś takiego (nie mój preferowany sposób to zrobić):

<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> 

Ale to wydaje się naprawdę źle mi się na wielu płaszczyznach (będę musiał zmodyfikować ten kod i kod fabryczny jeśli dodaję inny typ komponentu).

Edit - Przykład roboczy

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

aktualizacja

DCL jest przestarzała, ponieważ jakiś czas. Zamiast tego użyj ViewContainerRef.createComponent. Na przykład (z Plunker) zobaczyć Angular 2 dynamic tabs with user-click chosen components

oryginalny

Można użyć ngSwitch (podobny do własnego obejścia ale bardziej zwięzły) lub DynamicComponentLoader

Zobacz także

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