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

Question

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

Theres 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

注意

不要忘记NavigationStart从router模块导入

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
  });