Meine aktuelle Konfiguration:
%Vor% Es funktioniert. NavComponent
wird immer an den Ausgang nav
gerendert. Insbesondere funktioniert es für alle folgenden Arten von URLs:
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.
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: Ссылка
>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.
Tags und Links angular angular-router