Angular 2路由器事件监听器
如何在Angular 2路由器上监听状态变化？
在Angular 1.x中，我使用了这个事件：
$rootScope.$on('$stateChangeStart', function(event,toState,toParams,fromState,fromParams, options){ ... }) 所以，如果我在Angular 2中使用这个eventlistener：
window.addEventListener("hashchange", () => {return console.log('ok')}, false);
它不是返回'OK'，然后从JS状态改变，只有浏览器history.back（）函数运行。
使用router.subscribe（）函数作为服务：
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'); }) } }
在路由中初始化的组件中注入服务：
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) {} }
我在其他组件中注入这个服务，例如在这个例子中。 然后我改变状态，console.info（）在服务不工作。
我做错了什么？
新的路由器
constructor(router:Router) { router.events.subscribe(event:Event => { if(event instanceof NavigationStart) { } // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized }); }
旧
注入路由器并订阅路由更改事件
import {Router} from 'angular2/router'; class MyComponent { constructor(router:Router) { router.subscribe(...) } }
注意
对于新的路由器，不要忘记从router模块导入NavigationStart
import { Router, NavigationStart } from '@angular/router';
因为如果你不导入它， instanceof将不起作用，并且NavigationStart is not defined一个错误的NavigationStart is not defined会上升。
也可以看看
- https://angular.io/docs/ts/latest/api/router/index/Router-class.html
- 如何检测Angular 2中的路由更改？
你可以使用instanceof @GünterZöchbauer回答
this.router.events.subscribe(event => { if(event instanceof NavigationStart) { // do something... } }
或者你可以使用更懒惰的方法，但记住构造函数名称可以很容易地改变，而function仍然工作！
this.router.events.subscribe(event => { if(event.constructor.name === "NavigationStart") { // do something... } });
angular度2路由器事件具有不同的类，从router.events observable传递给订阅的router.events可以是NavigationEnd ， NavigationCancel ， NavigationError或NavigationStart 。 实际上会触发路由更新的将是NavigationEnd 。
我会远离使用instanceof或event.constructor.name因为event.constructor.name后的类名将被弄乱，它将无法正常工作。
您可以使用路由器的isActive函数，如下所示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 } }
在angular2中，转到文件“app.modules.ts” – >import
RouterModule.forRoot( appRoutes, { enableTracing: true } )
在enableTracing中，在控制台的enableTracing中真正显示routeEvents false在控制台中隐藏routeEvents
要监听所有状态更改，请扩展默认的RouterOutlet并在“激活”和“停用”处理程序中添加自己的逻辑。
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!'); } }
从“自定义路由器sockets”示例复制在这里： https : //auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/
