एंगुलर 2

Question

में डायनामिक टेम्पलेट "ट्रांसक्यूशन" मैं इस तरह कुछ हासिल करने की कोशिश कर रहा हूं: मेरे पास ObjectTypeA, ObjectTypeB और ObjectTypeC नामक मॉडल मॉडल है।

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

    } 
} 

मैं कुछ इस तरह करना चाहते हैं टेम्पलेट में: वहाँ भी एक कारखाने ComponentFactory, जो में पारित वस्तु के प्रकार के आधार विभिन्न घटकों का निर्माण करेगा है:

main_template.html

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

मैं संबंधित घटकों को गतिशील रूप से कैसे सम्मिलित करूं?

मैं कुछ इस तरह (यह कर के नहीं मेरी पसंदीदा तरीका) कर सकता है:

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

लेकिन यह है कई स्तरों पर मेरे लिए वास्तव में गलत लगता है (मैं इस कोड और कारखाने कोड को संशोधित करने के लिए होगा अगर मैं एक और घटक प्रकार जोड़ता हूं)।

संपादित करें - कार्य उदाहरण

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

अद्यतन

DCL थोड़ी देर के बाद से मान्य नहीं है। इसके बजाय ViewContainerRef.createComponent का उपयोग करें। एक उदाहरण (Plunker के साथ) के लिए देखें Angular 2 dynamic tabs with user-click chosen components

मूल

आप ngSwitch उपयोग कर सकते हैं या DynamicComponentLoader

भी देखें

• https://angular.io/docs/ts/latest/api/core/DynamicComponentLoader-class.html
(समान अपने स्वयं के वैकल्पिक हल लेकिन अधिक संक्षिप्त करने के लिए)
• How to use angular2 DynamicComponentLoader in ES6?