Reactive Forms-Gruppe an Router-Ausgang übergeben

Question

Ich versuche, meine Reactive Forms über viele Komponenten hinweg zu teilen, und ich stoße auf ein Problem, wenn ich versuche, das über Routing zu erreichen. Der Fehler Ich erhalte: ‚binden kann nicht zu‚Gruppe Router-Ausgang ‚‘, da es keine bekannte Eigenschaft ist‘ist

Hier ist der Router:

<router-outlet [group]="turnoverService.turnoverForm"></router-outlet>

Gibt es eine Möglichkeit zum Übergeben von Reactive Forms an untergeordnete Komponenten mit Routing?

Answer 1

Die Verwendung der Bindesyntax in Angular() funktioniert nur, wenn die Komponente eine @Input-Eigenschaft mit demselben Namen wie die Bindung hat. router-outlets habe das nicht. Außerdem wird die geroutete Komponente als ein Geschwister zu <router-outlet> hinzugefügt, kein Kind.

Der einfachste Weg (und Best Practice IMO) ist, nur einen gemeinsam genutzten Dienst zu verwenden, der die Daten enthält, die dann in die untergeordneten Komponenten eingefügt werden. Es sieht so aus, als hättest du eine turnoverService, also müssten die untergeordneten Komponenten dies in ihrem Konstruktor erfassen.

Weitere Informationen: Passing data into "router-outlet" child components (angular 2)

EDIT: Ein anderer Weg, dies zu tun, würde die resolve Methode zu benutzen, auf der Strecke selbst Definitionen. Die Funktion resolve wird ausgelöst, wenn die Route aktiviert wird, aber die Route selbst wird erst geladen, wenn die resolve-Funktion erfolgreich abgeschlossen wurde. Die geroutete Komponente hat dann über die Injector Zugriff auf die resolve Daten. Dies würde funktionieren, wenn Sie bereits über die Daten verfügen oder eine bestimmte Logik benötigen, um sie zu erhalten, aber wahrscheinlich ist dies nicht die beste Lösung, wenn die Methode resolve asynchrone AJAX-Aufrufe durchführt.

Weitere Informationen über resolve in diesem ausgezeichneten article (die Angular Docs selbst fehlen hier).