如何在Angular 2路由器中监听状态变化?
在Angular 1.x中,我使用了以下事件:
$rootScope.$on('$stateChangeStart', function(event,toState,toParams,fromState,fromParams, options){ ... })
因此,如果我在Angular 2中使用此事件监听器:
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(...) } }
注意
对于新路由器,请不要忘记NavigationStart从router模块导入
NavigationStart
router
import { Router, NavigationStart } from '@angular/router';
因为如果不导入,instanceof它将无法正常工作,并且会出现错误NavigationStart is not defined。
instanceof
NavigationStart is not defined