Mẫu động "chuyển đổi" trong Angular2

Question

Tôi đang cố gắng đạt được một cái gì đó như thế này: Tôi có một lớp mô hình được gọi là ObjectTypeA, ObjectTypeB và ObjectTypeC. Ngoài ra còn có một nhà máy ComponentFactory, mà dựa trên các loại của đối tượng thông qua năm sẽ tạo ra các thành phần khác nhau:

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

    } 
} 

Trong mẫu tôi muốn làm một cái gì đó như thế này:

main_template.html

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

Làm cách nào để chèn linh kiện được liên kết động?

tôi có thể làm một cái gì đó như thế này (không phải là cách ưa thích của tôi để làm việc đó):

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

Nhưng đây là dường như thực sự không đúng với tôi trên nhiều cấp độ (tôi sẽ phải thay đổi mã này và mã máy nếu tôi thêm một loại thành phần khác).

Edit - Working Ví dụ

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

cập nhật

DCL bị phản đối từ một thời gian. Sử dụng ViewContainerRef.createComponent để thay thế. Đối với một ví dụ (với Plunker) thấy Angular 2 dynamic tabs with user-click chosen components

gốc

Bạn có thể sử dụng ngSwitch (tương tự như cách giải quyết của riêng bạn nhưng ngắn gọn hơn) hoặc DynamicComponentLoader

Xem thêm

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