Comment détecter un changement d’itinéraire dans Angular?

Je cherche à détecter un changement de route dans mon AppComponent .

Par la suite, je vérifierai le jeton d’utilisateur global pour voir s’il est connecté. Ensuite, je peux redirect l’utilisateur s’il n’est pas connecté.

Dans Angular 2, vous pouvez vous subscribe (événement Rx) à une instance de routeur. Donc, vous pouvez faire des choses comme

 class MyClass { constructor(private router: Router) { router.subscribe((val) => /*whatever*/) } } 

Modifier (depuis rc.1)

 class MyClass { constructor(private router: Router) { router.changes.subscribe((val) => /*whatever*/) } } 

Edit 2 (depuis 2.0.0)

voir aussi: doc Router.events

 class MyClass { constructor(private router: Router) { router.events.subscribe((val) => { // see also console.log(val instanceof NavigationEnd) }); } } 

nouveau routeur> = RC.3

 import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router'; constructor(router:Router) { router.events.forEach((event) => { if(event instanceof NavigationStart) { } // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized }); } 

Vous pouvez également filtrer par événement donné:

 import 'rxjs/add/operator/filter'; constructor(router:Router) { router.events .filter(event => event instanceof NavigationStart) .subscribe((event:NavigationStart) => { // You only receive NavigationStart events }); } 

Utiliser l’ opérateur pairwise pour obtenir l’événement précédent et actuel est également une bonne idée. https://github.com/angular/angular/issues/11268#issuecomment-244601977

 import 'rxjs/add/operator/pairwise'; import { Router } from '@angular/router; export class AppComponent { constructor(private router: Router) { this.router.events.pairwise().subscribe((event) => { console.log(event); }); }; } 

Angulaire 4.x et supérieur:

Ceci peut être réalisé en utilisant la propriété url de la classe ActivatedRoute comme ci-dessous,

 this.activatedRoute.url.subscribe(url =>{ console.log(url); }); 

Remarque: que vous devez importer et injecter le fournisseur à partir d’un package angular/router

 import { ActivatedRoute } from '@angular/router` 

et

 constructor(private activatedRoute : ActivatedRoute){ } 

Le routeur 3.0.0-beta.2 devrait être

 this.router.events.subscribe(path => { console.log('path = ', path); }); 

Les réponses ici sont correctes pour un router-deprecated . Pour la dernière version du router :

 this.router.changes.forEach(() => { // Do whatever in here }); 

ou

 this.router.changes.subscribe(() => { // Do whatever in here }); 

Pour voir la différence entre les deux, veuillez vérifier cette question SO .

modifier

Pour le dernier, vous devez faire:

 this.router.events.subscribe(event: Event => { // Handle route change }); 

En angular 6 et RxJS6:

 import { filter, debounceTime } from 'rxjs/operators'; this.router.events.pipe( filter((event) => event instanceof NavigationEnd), debounceTime(40000) ).subscribe( x => { console.log('val',x); this.router.navigate(['/']); /*Redirect to Home*/ } ) 

Capturez les événements de modification d’itinéraire de la manière suivante …

 import { Component, OnInit, Output, ViewChild } from "@angular/core"; import { Router, NavigationStart, NavigationEnd, Event as NavigationEvent } from '@angular/router'; @Component({ selector: "my-app", templateUrl: "app/app.component.html", styleUrls: ["app/app.component.css"] }) export class AppComponent { constructor(private cacheComponentObj: CacheComponent, private router: Router) { /* Route event types NavigationEnd NavigationCancel NavigationError RoutesRecognized */ router.events.forEach((event: NavigationEvent) => { //Before Navigation if (event instanceof NavigationStart) { switch (event.url) { case "/app/home": { //Do Work break; } case "/app/About": { //Do Work break; } } } //After Navigation if (event instanceof NavigationEnd) { switch (event.url) { case "/app/home": { //Do Work break; } case "/app/About": { //Do Work break; } } } }); } } 

@Ludohen answer is great, mais dans le cas où vous ne voulez pas utiliser instanceof utilisez ce qui suit

 this.router.events.subscribe(event => { if(event.constructor.name === "NavigationStart") { // do something... } }); 

De cette façon, vous pouvez vérifier le nom de l’événement en cours sous forme de chaîne et si l’événement s’est produit, vous pouvez faire ce que vous avez prévu de faire pour votre fonction.

Le genre suivant de travaux et peut faire le tour pour vous.

 // in constructor of your app.ts with router and auth services injected router.subscribe(path => { if (!authService.isAuthorised(path)) //whatever your auth service needs router.navigate(['/Login']); }); 

Malheureusement, cela redirige plus tard dans le processus de routage que je le souhaiterais. onActivate() du composant cible d’origine est appelé avant la redirection.

Vous pouvez utiliser un décorateur @CanActivate sur le composant cible, mais celui-ci n’est pas centralisé et b) ne bénéficie pas des services injectés.

Ce serait formidable si quelqu’un pouvait suggérer une meilleure façon d’autoriser centralement un itinéraire avant qu’il ne soit commis. Je suis sûr qu’il doit y avoir un meilleur moyen.

Ceci est mon code actuel (comment le changer pour écouter le changement de route?):

 import {Component, View, bootstrap, bind, provide} from 'angular2/angular2'; import {ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router'; import {Location, LocationStrategy, HashLocationStrategy} from 'angular2/router'; import { Todo } from './components/todo/todo'; import { About } from './components/about/about'; @Component({ selector: 'app' }) @View({ template: `  `, directives: [RouterOutlet, RouterLink] }) @RouteConfig([ { path: '/', redirectTo: '/home' }, { path: '/home', component: Todo, as: 'Home' }, { path: '/about', component: About, as: 'About' } ]) class AppComponent { constructor(location: Location){ location.go('/'); } } bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'})]); 

Je le fais comme ça depuis RC 5

 this.router.events .map( event => event instanceof NavigationStart ) .subscribe( () => { // TODO } );