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

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

有 NavigationStart、NavigationEnd、NavigationFailed（或類似的東西）

有人知道如何使用這些嗎？我嘗試過一些東西，但還沒能讓它們做任何事情。

答案＃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 未定義。

答案＃2

就像這樣

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