angular2 监听路由变化

最近在项目中，有个需求：需要监控路由变化实现某个功能，所以研究了一番官网和路由相关的api

router.events()是一个observable对象，我们可以通过订阅它来获取路由变化的相关信息

• NavigationStart
• RouteConfigLoadStart
• RouteConfigLoadEnd
  
• RoutesRecognized
  
• GuardsCheckStart
  
• ChildActivationStart
  
• GuardsCheckEnd
  
• ResolveStart
  
• ResolveEnd
  
• ChildActivationEnd
  
• NavigationEnd
  
• NavigationCancel
  
• NavigationError
  

evnets提供了以上诸多类型的事件，方便我们根据事件的类型进行过滤（关于rxjs的过滤操作就不再介绍）

constructor(private ref: ChangeDetectorRef, private router: Router) {
}
ngOnInit() {
  this.routerEventsListener = this.router.events
  .filter(event => event instanceof NavigationEnd) //根据事件的类型进行过滤
  .subscribe((event) => {
    // your operation
    this.ref.detectChanges(); //我的操作
  });
}

大家一定要注意保护自己的操作，因为router.events是全局的，所以在组件内使用时，最好在ngOndestory()中unsubscribe，笔者进行了手动触发变更检测的操作，导致在其他页面路由跳转时，直接挂掉，原因是this.router.events所在组件此时已经被销毁，自然也就无法触发组件的模板更新。

ngOnDestroy() {
  this.routerEventsListener.unsubscribe();
}