typescript - Angular2'de dinamik şablon "transclusion"

Bunu başarmaya çalışıyorum: ObjectTypeA, ObjectTypeB ve ObjectTypeC adında bir model sınıfım var. Ayrıca, verilen nesnenin türüne göre farklı bileşenler oluşturacak bir ComponentFactory fabrikası da var:

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

    }
}

Şablonda şunları yapmak istiyorum:

main_template.html

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

İlgili bileşenleri dinamik olarak nasıl eklerim?

Bunu gibi bir şey yapabilirim (tercih ettiğim yöntem değil):

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

Ama bu bana birçok açıdan gerçekten yanlış gibi görünüyor (Başka bir bileşen türü eklersem bu kodu ve fabrika kodunu değiştirmem gerekecek).

Düzenle - Çalışan Örnek

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

}

Cevap #1

güncelle

DCL bir süredir kullanımdan kaldırıldı. Bunun yerine ViewContainerRef.createComponent kullanın. Bir örnek için (Plunker ile) Angular 2 dinamik sekmeler ve kullanıcı tarafından seçilen bileşenlere bakın

orijinal

ngSwitch kullanabilirsiniz (kendi geçici çözümünüze benzer ama daha özlü) veya DynamicComponentLoader

Ayrıca bakınız

  • https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html
  • Angular2 DynamicComponentLoader'ı ES6'da nasıl kullanılır?

İlgili makaleler