Wie können verschiedene Komponententypen basierend auf Laufzeitbeschränkungen in Angular2 + dynamisch angezeigt werden?

Question

Ich habe eine Rasterkomponente und eine dynamisch bestimmte zweite Komponente.

Es gibt eine Splitter-Komponente, die immer ein Gitter im oberen Teil enthält. Eine sekundäre Komponente wird im unteren Teil des Splitters angezeigt. Der Typ der sekundären Komponente hängt vom ausgewählten Zeilentyp im Raster ab. Wählen Sie Zeile 1 und die sekundäre Komponente möglicherweise Liniendiagramm Wählen Sie Zeile 2 und die sekundäre Komponente möglicherweise ein anderes Raster ... Wenn der Benutzer die ausgewählte Zeile ändert, müssen die Komponente und die angezeigten Daten aktualisiert werden.

Haben Sie Ideen, wie Sie das einrichten?

Answer 1

Sie können die zweite Komponente mit der [ngSwitch] Direktive dynamisch laden.

Wenn Sie wollen, dass sie dynamisch zu laden, einen Code ähnlich wie diese an Ihnen Es ist

<div [ngSwitch]="variable"> 
    <app-first *ngSwitchCase="1"></app-first> 
    <app-second *ngSwitchCase="2"></app-second> 
</div> 

bauen, wie Sie bestimmen, welche Komponente geladen werden soll. Sie können zum Beispiel den Wert einer Variablen mit jQuery von reinem JavaScript ändern, um eine bestimmte Komponente zu rendern. Die Komponente wird automatisch aktualisiert, wenn Sie eine Zeile ändern.

Wenn Sie den Inhalt automatisch aktualisieren möchten, damit die Daten der 1. Komponente mit der 2. übereinstimmen, müssen Sie eine Kreuzkomponentenkommunikation verwenden, die von Angular4 bereitgestellt wird. Gute Erklärung, wie man das hier tut: https://www.youtube.com/watch?v=I317BhehZKM