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

Question

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

有NavigationStart，NavigationEnd，NavigationFailed (或类似的东西)

有没有人知道如何使用它们？我摆弄了一些东西，但没能让他们做任何事情。

Answer 1

Router提供了一个可以订阅的events可观察对象

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

另请参阅

• https://angular.io/docs/ts/latest/api/router/index/Router-interface.html
• https://angular.io/docs/ts/latest/api/router/index/NavigationStart-class.html
• https://angular.io/docs/ts/latest/api/router/index/NavigationEnd-class.html
• https://angular.io/docs/ts/latest/api/router/index/NavigationCancel-class.html
• https://angular.io/docs/ts/latest/api/router/index/NavigationError-class.html
• https://angular.io/docs/ts/latest/api/router/index/RoutesRecognized-class.html

笔记

不要忘记从router模块导入NavigationStart

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

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

Answer 2

就像这样

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