如何使用新的 NavigationStart @angular-router 3.0.0-alpha.*答案

【问题标题】：How to use new NavigationStart @angular-router 3.0.0-alpha.*如何使用新的 NavigationStart @angular-router 3.0.0-alpha.*
【发布时间】：2017-07-14 00:38:52
【问题描述】：

我在新的 Angular 2 路由器中看到了这些新事件。

有 NavigationStart、NavigationEnd、NavigationFailed（或类似的东西）

有人知道如何使用这些吗？我搞砸了一些事情，但无法让他们做任何事情。

【问题讨论】：

标签： typescript angular

【解决方案1】：

Router 提供了一个可以订阅的 events observable

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

另见

注意

别忘了从router模块导入NavigationStart

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

因为如果你不导入它instanceof 将不起作用，并且会出现错误NavigationStart is not defined。

【讨论】：

我在 RC4 中看到了这个错误，Unhandled Promise rejection: (SystemJS) Error: Cannot resolve all parameters for 'Router'(?, ?, ?, ?, ?, ?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'Router' is decorated with Injectable。我用 ROUER_PROVIDERS 和 RC2 处理它，但不知道如何用 RC4 处理它，因为用 RC4 找不到它。你有什么提示或麻烦吗？
这似乎与这个问题或我的回答无关。见stackoverflow.com/a/38555016/217408
在使用这个的时候，你可能还需要从@angular/router 导入“Event”。否则，TypeScript 将使用常规的 window.Event，而 NavigationStart 不会解析到。
你是把这个放到 AppModule 的构造函数中了吗？
@oooyaya - 我从@angular/router 导入了Event，但出现编译错误。我必须将其从 @angular/router 中删除，然后执行 router.events.subscribe(event => { ... }) 以使其正常工作（即，将 event:Event 更改为 event）。

【解决方案2】：

就这样

 constructor(
  private router:Router
 ){}
 this.router.events
  .filter(event=> event instanceof NavigationStart)
  .subscribe((event:NavigationStart)=>{
     // TODO
  });

【讨论】：

Property 'filter' does not exist on type 'Observable<Event>'.
需要导入过滤算子，否则会报这个错误。 import 'rxjs/add/operator/filter'
从 rxjs 7 开始，Observable 上不再存在过滤器。