Winkel 2 Activatedroute params nicht im Dienst oder außerhalb <router-outlet - >
Ich habe ein sehr seltsames problem:
index.html
<navigation-menu *ngIf="isLoggedIn"></navigation-menu>
<div class="content-wrapper" [ngClass]="{'fullContent' : !isLoggedIn}">
<section class="content">
<router-outlet></router-outlet>
</section>
</div>
Navigations-Menü ist eine Komponente, die für das nav-Menü.
Im router-outlet-Inhalte gibt es eine Komponente namens "assets".
Was ich in der asset-Komponente:
import { ActivatedRoute}from "@angular/router";
constructor(private route: ActivatedRoute){}
public ngOnInit(): void {
this.route.params.subscribe(params => {
const id = params["id"];
}
Diese funktioniert und ich bekomme die Parameter meiner route (die Art von "asset -/: id).
Nun versuchte ich das gleiche in meinem Navigations-Menü-Komponente (die "außerhalb" der router-Ausgang) und in ein globales service namens contextservice.
Gleicher code wie oben, aber es ist auch nicht ausgelöst, auf route ändern. Wenn ich versuche mir einen aktuellen router snapshot
const strId = this.route.snapshot.params["id"];
nach NavigationEnd Ereignis ausgelöst wurde, ist es das gleiche Ergebnis: strId ist nicht definiert, weil der Parameter ein leeres Objekt.
Es funktioniert nur in meinen asset-Komponente.
Ist dies funktioniert wie beabsichtigt oder wie soll das gehandhabt werden?
Meine intension war, ein Ereignis auszulösen, von einem globalen service - (oder eine "Globale" Komponente wie die nav-Menü), die hören alle Weg(-params) verpasst.
Meine einzige Lösung wäre zu analysieren, die vollständige url nach jedem NavigationEnd Ereignis, das meiner Meinung nach kein richtiger Weg,...Oder übernehmen Sie die Parameter ändern, die in jedem Kind-Komponente (in-router-Steckdose) selbst.
Vielleicht habe ich nur eine grundlegende Fehler im Verständnis...
Dank
Lösung von akzeptierten Antworten:
this.router.events.subscribe(val => {
if (val instanceof RoutesRecognized) {
var strId = val.state.root.firstChild.params["id"];
}});
Vergessen Sie nicht importieren RoutesRecognized von Winkel-router!!
- Vielen Dank für diese. Von der großen Lesen in der akzeptierten Antwort gibt es mehrere Möglichkeiten zum nachverfolgen von änderungen in Routen, die Arbeit, aber ich letztlich endete an der gleichen Lösung, die Sie haben (mit RoutesRecognized), da es sehr viel besser lesbar und bietet die gleichen Details wie komplexere Lösungen.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Komponente Hinzugefügt, die der router bekommt das router-segment (
ActivatedRoute
) übergeben, aber im service gibt es keine route aktiviert. Sie können Sie abonnieren router.Veranstaltungen und durchqueren die Routen Baum (- router.firstChild...`) to get params einer bestimmten route sequement, die Sie benötigen.Siehe auch https://github.com/angular/angular/issues/11023
Ist hier ein eckiges service, was bedeutet, dass :
.
Tatsächlich, Ihre activatedRoute korrekt und aktuell sind, aber Sie haben alle den Baum, in, dass. also, wenn Sie gehen den ganzen Weg im inneren der Strecke.firstChild, werden Sie schließlich finden die Letzte route, die ich rief deeperActivatedRoute (innerhalb der route.firstChild...route.firstChild)
Also was ich getan habe ist, erstellen Sie einen Dienst zum verfolgen der deeperRoute, und haben es immer zugänglich
Dann in der app.Komponente.ts ich den Dienst starten (nur um sicherzustellen, dass es immer eine tracking)
Und schließlich, nehmen Sie Ihre route, wo immer service Sie sind:
Beantwortung der Frage, können Sie einfach den deeperActivatedRoute und überprüfen Sie normalerweise die snapshop.url, so wie du tun würde-in eine Komponente