Ich suche nach einer Routenänderung in meinem AppComponent
.
Danach überprüfe ich das globale Benutzertoken, um festzustellen, ob er angemeldet ist. Dann kann ich den Benutzer umleiten, wenn er nicht angemeldet ist.
In Angular 2 können Sie subscribe
(Rx-Ereignis) zu einer Router-Instanz. So können Sie Dinge wie tun
class MyClass {
constructor(private router: Router) {
router.subscribe((val) => /*whatever*/)
}
}
Bearbeiten (seit rc.1)
class MyClass {
constructor(private router: Router) {
router.changes.subscribe((val) => /*whatever*/)
}
}
Bearbeiten 2 (seit 2.0.0)
Siehe auch: Router.events doc
class MyClass {
constructor(private router: Router) {
router.events.subscribe((val) => {
// see also
console.log(val instanceof NavigationEnd)
});
}
}
event._root.children[0].value._routeConfig.data
ich hoffe, dass es einen besseren Weg gibtfilter
Operator filtern .router.events.pipe(filter(e => e instanceof NavigationEnd).subscribe((e) => { ... }
RxJS 6
Vielen Dank an Peilonrayz (siehe Kommentare unten)
neuer Router> = RC.3
Sie können auch nach dem angegebenen Ereignis filtern:
Es ist auch eine gute Idee, den
pairwise
Operator zu verwenden, um das vorherige und aktuelle Ereignis abzurufen. https://github.com/angular/angular/issues/11268#issuecomment-244601977quelle
Argument of type '(event: Event) => void' is not assignable to parameter of type
Argument of type '(event: Event) => void' is not assignable to parameter of type
Fehler liegt darin, dass Sie in Ihrem Filter-Snippet ein Objekt vom Typ Event anstelle von NavigationEvent abonnieren.Für Angular 7 sollte jemand schreiben wie:
this.router.events.subscribe((event: Event) => {})
Ein detailliertes Beispiel kann wie folgt sein:
quelle
Angular 7 , wollen , wenn Sie
subscribe
zurouter
quelle
Winkel 4.x und höher:
Dies kann mithilfe der URL-Eigenschaft der ActivatedRoute- Klasse wie folgt erreicht werden:
Hinweis: Sie müssen den Anbieter aus dem
angular/router
Paket importieren und injizierenund
quelle
Router 3.0.0-beta.2 sollte sein
quelle
In Winkel 6 und RxJS6:
quelle
import {Router, NavigationEnd} from "@angular/router"
Die Antworten hier sind richtig für
router-deprecated
. Für die neueste Version vonrouter
:oder
Um den Unterschied zwischen den beiden zu sehen, lesen Sie bitte diese SO-Frage .
Bearbeiten
Für das Neueste müssen Sie Folgendes tun:
quelle
router
wurde erneut aktualisiert (ich habe meine Antwort noch nicht aktualisiert), daher bin ich mir nicht sicher, wie es für die neueste Version ist. Für dasrouter
, worüber ich schrieb, konnte man nicht. @aknIn Angular 8 sollten Sie mögen
this.router.events.subscribe((event: Event) => {})
Beispiel:
quelle
In der Komponente möchten Sie möglicherweise Folgendes versuchen:
quelle
quelle
Ort funktioniert ...
quelle
Die meisten Lösungen sind korrekt, aber ich habe das Problem, dass dieses Ereignis mehrmals "Navigation emittieren" ausgelöst wird. Wenn ich eine Route geändert habe, wird dieses Ereignis ausgelöst. Hören ist also die Komplettlösung für Angular 6.
quelle
@ Ludohen Antwort ist großartig, aber falls Sie nicht verwenden möchten,
instanceof
verwenden Sie die folgendenAuf diese Weise können Sie den aktuellen Ereignisnamen als Zeichenfolge überprüfen und bei Auftreten des Ereignisses das tun, wofür Sie Ihre Funktion geplant haben.
quelle
Event
Typ verursacht einen Fehler in Atom, deshalb habe ich ihn nicht verwendetinstanceOf
damit Ihr Beispiel auch im Produktionscode funktioniert.if(event instanceOf NavigationStart) {
if(event instanceof NavigationStart)
Ich arbeite mit der Angular5-Anwendung und stehe vor dem gleichen Problem. Wenn ich Angular Documentation durchlaufe, bieten sie die beste Lösung für die Behandlung von Router-Ereignissen. Überprüfen Sie die folgende Dokumentation.
Router-Ereignisse in Angular Route-Ereignisse in Angular5
Aber speziell für den fraglichen Fall benötigen wir NavigationEnd Event
Navigation End Event Angular
Wie benutzt man das?
Wann soll man das benutzen?
In meinem Fall hat meine Anwendung ein gemeinsames Dashboard für alle Benutzer wie Benutzer und Administratoren, aber ich muss einige Navigationsleistenoptionen gemäß Benutzertypen anzeigen und ausblenden.
Das ist der Grund, warum ich, wenn sich die URL ändert, die Dienstmethode aufrufen muss, die die angemeldeten Benutzerinformationen gemäß der Antwort zurückgibt, weitere Vorgänge ausführen werde.
quelle
Die folgende Art von Arbeiten und kann das Knifflige für Sie tun.
Leider leitet dies später im Routing-Prozess weiter, als ich möchte. Die
onActivate()
der ursprünglichen Zielkomponente wird vor der Umleitung aufgerufen.Es gibt einen
@CanActivate
Dekorator, den Sie für die Zielkomponente verwenden können, der jedoch a) nicht zentralisiert ist und b) nicht von injizierten Diensten profitiert.Es wäre großartig, wenn jemand eine bessere Möglichkeit vorschlagen könnte, eine Route zentral zu autorisieren, bevor sie festgeschrieben wird. Ich bin sicher, es muss einen besseren Weg geben.
Dies ist mein aktueller Code (Wie würde ich ihn ändern, um die Routenänderung zu hören?):
quelle
Ich mache es so seit RC 5
quelle
Nehmen Sie einfach Änderungen an AppRoutingModule vor
quelle
Winkel 8. Überprüfen Sie, ob die aktuelle Route die Basisroute ist .
quelle
Ich würde so etwas schreiben:
quelle
einfache Antwort für Angular 8. *
quelle