Comment détecter un changement d'itinéraire dans Angular 2?

Dans Angular 2, vous pouvez vous subscribe (événement Rx) à une instance de routeur. Vous pouvez donc 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*/) } } 

Modifier 2 (depuis 2.0.0)

Voir aussi: Router.events doc

 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 l'é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 }); } 

L'utilisation de 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); }); }; } 

Les réponses ici sont correctes pour le 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, vérifiez cette question SO .

modifier

Pour le plus récent, vous devez faire:

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

Le routeur 3.0.0-beta.2 devrait être

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

Le KIND suivant des travaux et peut vous rendre délicat 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 souhaite. onActivate() du composant cible d'origine est appelé avant la redirection.

Il existe un décorateur @CanActivate vous pouvez utiliser sur le composant cible, mais c'est a) non centralisé et b) ne bénéficie pas des services injectés.

Ce serait génial si quelqu'un peut suggérer une meilleure façon d'autoriser centralement un itinéraire avant qu'il ne soit engagé. Je suis sûr qu'il doit y avoir une meilleure façon.

C'est mon code actuel (Comment le modifier pour écouter le changement d'itinéraire?):

 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: ` <div class="container"> <nav> <ul> <li><a [router-link]="['/Home']">Todo</a></li> <li><a [router-link]="['/About']">About</a></li> </ul> </nav> <router-outlet></router-outlet> </div> `, 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: '/'})]); 

La réponse @Lowhen est formidable, mais au cas où vous ne souhaitez pas utiliser instanceof utilisez le suivant

 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 tant que chaîne et si l'événement s'est produit, vous pouvez faire ce que vous avez prévu de faire.

Je le fais comme ça depuis RC 5

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