In den aktuellen Dokumenten wird nur über das Abrufen von Routenparametern gesprochen, nicht über die tatsächlichen Routensegmente.
Wenn ich zum Beispiel das übergeordnete Element der aktuellen Route finden möchte, wie ist das möglich?
angular
angular2-routing
pdeva
quelle
quelle
window.location.pathname
window.location
ist, dass sie, wenn sie in Zukunft serverseitiges Rendering implementieren möchten, auf einige Schwierigkeitenwindow
stoßen werden, da es auf dem Node.js-Server nicht vorhanden ist, sie jedoch die Angular-Standardmethoden verwenden müssen, um auf die Route zuzugreifen und sie werden sowohl auf dem Server als auch auf dem Browser in Ordnung sein.Antworten:
Der neue V3-Router verfügt über eine URL-Eigenschaft.
quelle
this.router.events.filter((event: any) => event instanceof NavigationEnd).subscribe(event => { console.log('this is what your looking for ', event.url); });
. Stellen Sie sicher, dass Sieimport { Router, NavigationEnd } from '@angular/router';
Winkel RC4:
Sie können importieren
Router
aus@angular/router
Dann injizieren Sie es:
Rufen Sie dann den URL-Parameter auf:
quelle
Injizieren Sie
Location
in Ihre Komponente und lesenlocation.path();
Sie Sie müssenSie müssenROUTER_DIRECTIVES
irgendwo hinzufügen, damit Angular aufgelöst werden kannLocation
.import: [RouterModule]
dem Modul hinzufügen .Aktualisieren
Im V3 (RC.3) -Router können Sie
ActivatedRoute
mithilfe seinersnapshot
Eigenschaft weitere Details einfügen und darauf zugreifen .oder
Siehe auch Angular 2-Router-Ereignis-Listener
quelle
navigate
zusammen mit dem (angehängten) Namen der untergeordneten Route, zu der ich navigieren möchte, an die Methode weitergeben kann?MyTrackingService
erläuterte Zugriff auf diese Werte ermöglichen.canActivate()
Methode, so dass ich zu einer „Login“ Seite umleiten, und dann umleiten zurück , nachdem der Benutzer authentifiziert auf die ursprüngliche Route?für neuen Router> = RC.3
Der beste und einfachste Weg, dies zu tun, ist!
quelle
Benutze das
Und im
main.ts
ImportBEARBEITEN
Moderne Art und Weise
quelle
/
. Alle anderen Methoden werden einfach zurückgegeben .Für diejenigen, die noch danach suchen. Unter Angular 2.x gibt es einige Möglichkeiten.
Verweise:
quelle
So erhalten Sie die Routensegmente:
quelle
Sie können mit versuchen
Alternative Wege
window.location.pathname
welches den Pfadnamen gibt.quelle
Um die aktuelle Route zuverlässig zu erhalten, können Sie diese verwenden
quelle
Das native
window
Objekt funktioniert ebenfalls einwandfreiHINWEIS: VERWENDEN SIE DIESES NICHT FÜR DIE SERVERSEITIGE RENDERUNG
quelle
Kurzversion Wenn Sie Router importiert haben, können Sie einfach etwas wie verwenden
this.router.url === "/ search"
Andernfalls gehen Sie wie folgt vor
1) Importieren Sie den Router
2) Deklarieren Sie den Eintrag im Konstruktor
3) Verwenden Sie den Wert in Ihrer Funktion
@ Victor Antwort hat mir geholfen, dies ist die gleiche Antwort wie er, aber mit ein wenig Detail, da es jemandem helfen könnte
quelle
quelle
In Angular2 Rc1 können Sie RouteSegment injizieren und in der Naviagte-Methode übergeben.
quelle
Mit Angular 2.2.1 (in einem Angular2-Webpack-Starter-basierten Projekt) funktioniert dies:
In der Vorlage von AppComponent können Sie zB {{activeUrl}} verwenden.
Diese Lösung ist vom Code von RouterLinkActive inspiriert.
quelle
Winkel 2 rc2
quelle
Folgendes funktioniert für mich in Angular 2.3.1.
Das
data
ist ein Objekt und wir brauchen dieurl
in diesem Objekt enthaltene Eigenschaft. Wir erfassen diesen Wert also in einer Variablen und können diese Variable auch in unserer HTML-Seite verwenden. Zum Beispiel möchte ich ein div nur anzeigen, wenn sich der Benutzer auf der Startseite befindet. In diesem Fall ist mein Router-URL-Wert/home
. So kann ich ein div folgendermaßen schreiben:quelle
Ich hatte das gleiche Problem mit
Ich erhalte die aktuelle Route mit Abfrageparametern. Eine Problemumgehung, die ich gemacht habe, war stattdessen Folgendes:
Keine wirklich schöne Lösung, aber hilfreich.
quelle
Sie können verwenden
ActivatedRoute
, um den aktuellen Router abzurufenOriginalantwort (für RC-Version)
Ich habe eine Lösung in der AngularJS Google Group gefunden und es ist so einfach!
Hier ist die ursprüngliche Antwort
https://groups.google.com/d/msg/angular/wn1h0JPrF48/zl1sHJxbCQAJ
quelle
url
jetzt nicht mehr die URL und eine Zeichenfolge, sondern aComponentInstruction
.quelle
Für Ihre Zwecke können Sie verwenden
this.activatedRoute.pathFromRoot
.Mithilfe von pathFromRoot können Sie die Liste der übergeordneten URLs abrufen und prüfen, ob der erforderliche Teil der URL Ihrer Bedingung entspricht.
Weitere Informationen finden Sie in diesem Artikel unter http://blog.2muchcoffee.com/getting-current-state-in-angular2-router/ oder installieren Sie ng2-router-helper ab npm
quelle
Um das übergeordnete Element der aktuellen Route zu finden, können Sie das
UrlTree
vom Router mithilfe relativer Routen abrufen:Dann, um die Segmente der primären Steckdose zu erhalten:
quelle
Ab sofort gehe ich wie folgt vor:
Wo
router
ist eine Instanz vonActivatedRoute
quelle
quelle
quelle
Dies ist einfach. In Winkel 2 müssen Sie die Router- Bibliothek nur folgendermaßen importieren :
Dann müssen Sie es im Konstruktor der Komponente oder des Dienstes wie folgt instanziieren:
Dann in jedem Teil des Codes, entweder in einer Funktion, Methode, Konstrukt, was auch immer:
quelle
Sie können in der .ts-Datei verwenden
quelle
Dies könnte Ihre Antwort sein. Verwenden Sie die params-Methode der aktivierten Route, um den Parameter von der URL / Route abzurufen, die Sie lesen möchten. Unten finden Sie ein Demo-Snippet
quelle
quelle
Wenn Sie auf die aktuelle URL zugreifen müssen, müssen Sie normalerweise warten, bis NavigationEnd oder NavigationStart etwas tun. Wenn Sie nur die Router-Ereignisse abonnieren, gibt das Abonnement viele Ereignisse im Routenlebenszyklus aus. Verwenden Sie stattdessen einen RxJS-Operator, um nur nach dem Ereignis zu filtern, das Sie benötigen. Der vorteilhafte Nebeneffekt davon ist, dass wir jetzt strengere Typen haben!
quelle
Ich hatte das Problem, dass ich den URL-Pfad benötigte, wenn der Benutzer durch die App navigiert oder auf eine URL zugreift (oder eine bestimmte URL aktualisiert), um untergeordnete Komponenten basierend auf der URL anzuzeigen.
Außerdem möchte ich ein Observable, das in der Vorlage verwendet werden kann, sodass router.url keine Option war. Das router.events- Abonnement wird auch nicht ausgeführt, da das Routing ausgelöst wird, bevor die Vorlage der Komponente initialisiert wird.
Hoffe es hilft, viel Glück!
quelle