Dynamisch erstellen Sie eine Komponente in Angular2 abhängig von Daten von einem API-Aufruf

Question

Für meine Anwendung habe ich eine Dropdown-Liste von "Anweisungen", die ein Benutzer auswählen kann. Wenn der Benutzer eine bestimmte Anweisung auswählt, wird ein API-Aufruf ausgeführt, der Methoden zur Anzeige dieser Daten, sogenannte ViewOptions, abruft. Das Format sieht wie folgt aus:

[ 
    { 
    "Id": 1, 
    "OptionName": "Graph and table" 
    }, 
    { 
    "Id": 3, 
    "OptionName": "Query results" 
    } 
] 

Jetzt habe ich eine andere Komponente, die gemacht werden, wenn die viewoptions geladen werden, die eine Registerkarte mit Informationen je nach Ansichtsoptionen angezeigt werden soll. In diesem Beispiel gibt es also eine Registerkarte, auf der ein Diagramm und eine Datentabelle angezeigt werden müssen, und eine weitere Registerkarte, auf der die Ergebnisse einer Abfrage angezeigt werden.

auf der Registerkarte Komponente habe ich die folgende HTML:

<ngb-tabset justify="justified" *ngIf="viewOptions.length"> 
    <ngb-tab *ngFor="let vo of viewOptions" id="{{vo.Id}}"> 
    <ng-template ngbTabTitle>{{vo.OptionName}}</ng-template> 
    <ng-template ngbTabContent></ng-template> 
    </ngb-tab> 
</ngb-tabset> 

Also, für jeden viewoption wird eine Registerkarte mit dem richtigen Titel wiedergegeben werden. Jetzt liegt meine Verwirrung darin, wie ich mit dem 'ngbTabContent' umgehen sollte. Hier möchte ich eine bestimmte Komponente abhängig von der Viewoption, zum Beispiel, wenn es ein "Graph und Tabelle" ist, habe ich die Komponente, für "Abfrageergebnisse" habe ich die Komponente, und so weiter ... Ich bin ziemlich neu in Angular2 und Ich habe das Gefühl, dass ich dies mit einer Art Templating machen muss, aber die Tatsache, dass ich dies dynamisch machen muss, hängt von diesem 'vo'-Parameter in einem ng ab, der etwas mit meinem Kopf vermischt.

Answer 1

Nachdem ich die Lösung von SirWojtek getestet hatte und sie nicht wirklich für meine Bedürfnisse geeignet fand (siehe meine Kommentare zu seiner Antwort), fand ich den folgenden Link und die Lösung unter dem Abschnitt "Dynamische Komponenten" war genau das, was ich suchte: https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36

Answer 2

Sie können das Problem lösen, indem Sie eine untergeordnete Route hinzufügen. Sie müssen router-outlet statt ngTabContent platzieren, Ihre dynamischen Komponenten als untergeordnete Route verknüpfen und zu einer richtigen Route umleiten.

Ihre Stammkomponente HTML

<ngb-tabset justify="justified" *ngIf="viewOptions.length"> 
    <ngb-tab *ngFor="let vo of viewOptions" id="{{vo.Id}}"> 
    <ng-template ngbTabTitle>{{vo.OptionName}}</ng-template> 
    </ngb-tab> 
    <router-outlet></router-outlet> 
</ngb-tabset> 

Ihre Eltern Komponentencode

onBackendResponse(res) { 
    if (res.dynamicComponent === 'first') { 
     this.router.navigateByUrl('firstDynamic'); 
    } else if (res.dynamicComponent === 'second') { 
     this.router.navigateByUrl('secondDynamic'); 
    } 
} 

Ihre Routing

const appRoutes: Routes = [ 
    { 
    path: 'parent', component: ParentComponent, children: [ 
     { path: 'firstDynamic', component: FirstDynamic }, 
     { path: 'secondDynamic', component: SecondDynamic } 
    ] 
    }, 
];