Angular 5: Wie lege ich alle Pfade für eine Steckdose mit nur einer Route an dieselbe Komponente?

8

Meine aktuelle Konfiguration:

%Vor%

Es funktioniert. NavComponent wird immer an den Ausgang nav gerendert. Insbesondere funktioniert es für alle folgenden Arten von URLs:

%Vor%

Beachten Sie, dass der Router verschiedene Routen zu diesen URLs anpasst:

  • (1) wird für (c) verwendet
  • (2) wird für (a) und (b) verwendet

Das ist der Grund, warum die NavComponent Instanz zerstört und neu erstellt wird, wenn sich der Standort ändert, sagen wir von (c) bis (a) . Und das muss ich verhindern. Ich muss meine Instanz wegen ihres Status, ihrer Animationen usw. behalten. Soweit ich weiß, ist es nur möglich, wenn für alle URLs die gleiche Route verwendet wird, ich kann jedoch keinen Weg finden, dies zu tun. Wenn ich (1) entferne, hören die URLs wie (c) auf, NavComponent in nav anzuzeigen. Anscheinend passt ** nicht zu solchen URLs (ich weiß nicht warum).

Sie können es hier in Aktion sehen: Ссылка

Was ist die richtige Lösung hier?

Im Moment überschreibe ich UrlSerializer , um (nav:) vor dem Parsing zu URLs wie (c) hinzuzufügen aber es fühlt sich an wie ein Hack.

    
thorn 12.02.2018, 10:57
quelle

2 Antworten

3

Dumme Frage, aber können Sie die URL nicht einfach mit dem Standortdienst ändern und auf derselben Komponente bleiben (und nur die Zustände für Ihre Animationen ändern)?

Andernfalls können Sie eine benutzerdefinierte RouteReuseStrategy implementieren, um die Wiederverwendung Ihrer Komponente zu erzwingen

%Vor%

Hier ist Ihr modifizierter Stackblitz, der Ihre NavComponent immer wieder verwendet

Ссылка

Links

Routenwiederverwendung Strategie erklärt: Ссылка

Standardwerte für die eckige Router-Strategie: Ссылка

>     
David 17.02.2018, 09:50
quelle
0

Ich meine, was Sie brauchen, ist ein Router-Outlet geschachtelt. Etwas wie das:

app.component.html: <router-outlet></router-outlet>

Feature-Bereich.component.html: <your-navbar-component></your-navbarcomponent> <router-outlet></router-outlet>

Kind-der-Feature-Bereich.component.html: < h1>Hi there!</h1>

Ihre-navbar-Komponente.component.html: < p>some links here...</p>

Wenn Sie auf http://localhost:4200/feature-path/child-feature-path zugreifen du wirst bekommen:

einige Links hier ...

Hallo!

Wenn Sie brauchen, kann ich etwas pluker mit einem Beispiel schreiben, um es besser zu erklären. Aber ich meine, dass Sie den Router mit einer Aufgabe überladen, die ihm vielleicht nicht liegt.

    
Christian G Fritsch 16.02.2018 11:18
quelle

Tags und Links