Ich möchte verschiedene Komponenten basierend auf unterschiedlichen Endpunktdaten in Angular 2 anzeigen

Question

Ich arbeite an einem Projekt, wo ich eine andere Vorlage/Komponente basierend auf meiner Endpunktantwort anzeigen muss.

Zum Beispiel

{data: {type: 1, textToDisplay: 'I want beans'} } 

Sollte Komponente 1 in die Haupt App-Vorlage injizieren.

Wenn die Daten

{data: {type: 2, textToDisplay: 'I want cheese', numberToDisplay: '101' } } 

Komponente injizieren Sollten 2 in die Haupt App-Vorlage und natürlich Komponente 2 würde 1 bis Komponente unterschiedlich sein, weil es zusätzliche Eigenschaften.

Ich möchte wirklich nicht schlechte Praxis durch Anhängen von Elementen in die Haupt-App-Vorlage noch möchte ich eine massive Vorlage mit [if] Direktiven schreiben, wie wir viele, 5-8, verschiedene Komponenten zu rendern und es haben könnten würde die Vorlage aufblähen.

Was ist ein geeigneter Weg?

Answer 1

Wie @ Günter erwähnt, können Sie DynamicComponentLoader

@Component({ 
    selector: 'my-app', 
    template: `<button (click)="addCmp()" #theBody>add</button> 
    `, 
    directives: [BaseDynamicComponent] 
}) 
export class AppComponent { 
    @ViewChild('theBody', {read: ViewContainerRef}) theBody; 
    cmp:ComponentRef; 

    constructor(injector: Injector,private resolver: ComponentResolver) {} 

    addCmp(data){ 
    console.log('adding'); 
    this.resolver.resolveComponent(BaseDynamicComponent).then((factory:ComponentFactory<any>) => { 
     this.cmp = this.theBody.createComponent(factory); 
     //and you can set your BaseDynamicComponent's 'extra' properties here 
     this.cmp.instance.numberToDisplay = data.numberToDisplay; 
    }); 
    } 
    } 

Dies wird fügen Sie die BaseDynamicComponent unter dem #theBody Element verwenden.

Hier ist ein Beispiel plunkr:

Plunker

Wenn Sie auf die Schaltfläche Hinzufügen klicken Sie, wird eine neue Komponente mit dem Testfeld zugeordnet „Test“

this.cmp.instance.test = "the test"; 

hinzufügen oder Sie können die Komponenten wie in @ Günters Antwort vordefinieren (https://stackoverflow.com/a/36325468/5706293) und dann entsprechend anhängen