Listener di eventi router angular 2

Come ascoltare il cambio di stato nel router Angular 2?

In 1.x angular ho utilizzato questo evento:

$rootScope.$on('$stateChangeStart', function(event,toState,toParams,fromState,fromParams, options){ ... }) 

Quindi, se utilizzo questo eventlistener in Angular 2:

 window.addEventListener("hashchange", () => {return console.log('ok')}, false); 

non viene restituito ‘ok’, quindi cambia stato da JS, solo dopo la funzione browser history.back () viene eseguita.

Utilizza la funzione router.subscribe () come servizio:

 import {Injectable} from 'angular2/core'; import {Router} from 'angular2/router'; @Injectable() export class SubscribeService { constructor (private _router: Router) { this._router.subscribe(val => { console.info(val, '<-- subscribe func'); }) } } 

Inietti il ​​servizio nel componente che inizia nel routing:

 import {Component} from 'angular2/core'; import {Router} from 'angular2/router'; @Component({ selector: 'main', templateUrl: '../templates/main.html', providers: [SubscribeService] }) export class MainComponent { constructor (private subscribeService: SubscribeService) {} } 

Inietto questo servizio in altri componenti come in questo esempio. Poi cambio stato, console.info () in servizio non funziona.

Cosa faccio di sbagliato?

nuovo router

 constructor(router:Router) { router.events.subscribe(event:Event => { if(event instanceof NavigationStart) { } // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized }); } 

vecchio

Inietti il ​​router e iscriviti agli eventi di modifica del percorso

 import {Router} from 'angular2/router'; class MyComponent { constructor(router:Router) { router.subscribe(...) } } 

NOTA

Per il nuovo router, non dimenticare di importare NavigationStart dal modulo router

 import { Router, NavigationStart } from '@angular/router'; 

perché se non lo si importa, instanceof non funzionerà e un errore NavigationStart is not defined verrà NavigationStart is not defined .

Guarda anche

Puoi usare instanceof come @ GünterZöchbauer ha risposto

 this.router.events.subscribe(event => { if(event instanceof NavigationStart) { // do something... } } 

oppure puoi usare un approccio più pigro , ma ricorda che il nome del costruttore può essere cambiato facilmente mentre la funzione è ancora funzionante!

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

Gli eventi del router angular 2 hanno classi diverse e ciò che viene passato all’abbonamento dal router.events osservabile può essere NavigationEnd , NavigationCancel , NavigationError o NavigationStart . Quello che effettivamente attiverà un aggiornamento del routing sarà NavigationEnd .

Vorrei stare lontano dall’uso di instanceof o event.constructor.name perché dopo la minificazione i nomi delle classi verranno manomessi non funzionerà correttamente.

Puoi invece utilizzare la funzione isActive del router, mostrata qui https://angular.io/docs/ts/latest/api/router/index/Router-class.html

 this.routerEventSubscription = this._router.events.subscribe((event: any) => { if (this._router.isActive(events.url, false)) { // true if the url route is active } } 

in angular2, vai al file “app.modules.ts” -> importazioni

 RouterModule.forRoot( appRoutes, { enableTracing: true } ) 

in enableTracing true mostra routeEvents in console in enableTracing false hide routeEvents nella console

Per ascoltare tutte le modifiche di stato, estendere il RouterOutlet predefinito e aggiungere la propria logica nei gestori ‘triggers’ e ‘distriggers’.

 import {Directive} from 'angular2/core'; import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router'; @Directive({ selector: 'router-outlet' }) export class MyOwnRouterOutlet extends RouterOutlet { ... activate() { console.log('Hello from the new router outlet!'); } } 

Copia dall’esempio “Custom Router Outlet” qui: https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/