Angular 2路由器事件监听器

Question

如何在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（）无法正常工作。

我做错了什么？

Answer 1

您也可以使用过滤事件filter()。但不要只是使用filter(e => e is NavigationEnd)更好的解决方案是添加一个“类型防护”，filter()例如：&nbsp;filter((e): e is NavigationEnd => e instanceof NavigationEnd),&nbsp;它包含两件事：e is NavigationEnd 这是您要为其定义函数的断言（这是打字稿语法）e instanceof NavigationEnd 这是检查类型的实际运行时代码这样做的好处是，运算符位于“管道”的更深处，如下map所示，现在知道类型是NavigationEnd，但是如果没有类型保护，您将拥有一个type Event。如果只需要检查一种事件类型，那么这是最干净的方法。在严格模式下，这似乎对于避免编译器错误很有必要。