Angular2: Zeigt abhängig von der Hauptnavigation verschiedene "Toolbar" -Komponenten an

Dies ist eine konzeptionelle Frage, wie man die benötigte Funktionalität mit Angular 2 "richtig" umsetzen kann.

Meine Anwendung verfügt über ein Navigationsmenü, eine Symbolleiste und einen Inhaltsbereich. Letztere enthält das primäre <router-outlet> und zeigt die verschiedenen Ansichten wie Liste und Details an.

Was ich erreichen möchte, ist, dass die Symbolleiste unterschiedliche Komponenten anzeigt, abhängig von der Komponente / Ansicht, die im Inhaltsbereich gerendert wird. Beispielsweise benötigt die Listenkomponente ein Suchsteuerelement in der Symbolleiste, während die Detailkomponente eine Speicherschaltfläche benötigt.

A) Mein erster Versuch war, der Symbolleiste einen anderen (namens) <router-outlet> hinzuzufügen und die Symbolleistenkomponenten basierend auf statischen Routen anzuzeigen. Was sich falsch anfühlt:

1. Die statische Inhalts-Toolbar-Beziehung ist für meinen Geschmack zu locker gekoppelt.
2. Die Beziehung ist in der URL sichtbar (und änderbar).
3. Der Toolbar-Ausgang behält diesen Pfad auch dann bei, wenn der Benutzer weg navigiert.

B) Mein zweiter Versuch bestand darin, in der Komponente ngOnInit der Hauptansichtskomponente, die sie enger koppelt, auf die Toolbar-Komponenten (auch mit dem benannten Toolbar-Outlet) zu navigieren. Was riecht schlecht:

1. A2
2. A3, um dies zu verhindern, konnte ich den Toolbar-Ausgang auf ngOnDestroy "löschen", aber ich habe nicht herausgefunden, wie.

C) Geben Sie dem Router eine letzte Chance, seit ich herausgefunden habe, dass diese Art von funktioniert:

Die Idee ist, dass der Router den passenden Pfad pro Ausgang auswählen würde. Aber (nein, es hätte so einfach sein können) Leider funktioniert das nicht:

Scheinbar (und vielleicht zufällig) funktioniert es nur mit einem leeren Pfad. Warum, oh warum?

D) Eine komplett andere Strategie wäre, meine Komponentenhierarchie zu überarbeiten, so dass jede Hauptansichtskomponente eine entsprechende Symbolleiste enthält, und verwenden Sie Multi-Slot-Content-Projektion . Habe das nicht versucht, aber ich habe Angst, dass es Probleme mit mehreren Instanzen der Toolbar gibt.

Wie so oft scheint dies ein häufiger Anwendungsfall zu sein, und ich frage mich, wie Angular 2-Experten das lösen würden. Irgendwelche Ideen?