Angular 学习笔记82：监听路由的变化

在项目中，有时会遇到这样一个问题：在应用中，需要根据当前的页面控制页面上某一个组件或者元素的显示与否，此时需要监听当前路由的变化，根据路由中是否包含了某一个关键字，从而判断当前元素或者组件的显示与否。

路由变化的事件

• 使用 Router的 events: Observable属性

路由的事件如下：

路由器事件	说明
NavigationStart	本事件会在导航开始时触发
RouteConfigLoadStart	本事件会在 Router 惰性加载 某个路由配置之前触发
RouteConfigLoadEnd	本事件会在惰性加载了某个路由后触发
RoutesRecognized	本事件会在路由器解析完 URL，并识别出了相应的路由时触发
GuardsCheckStart	本事件会在路由器开始 Guard 阶段之前触发。
ChildActivationStart	本事件会在路由器开始激活路由的子路由时触发。
ActivationStart	本事件会在路由器开始激活某个路由时触发。
GuardsCheckEnd	本事件会在路由器成功完成了 Guard 阶段时触发。
ResolveStart	本事件会在 Router 开始解析（Resolve）阶段时触发。
ResolveEnd	本事件会在路由器成功完成了路由的解析（Resolve）阶段时触发。
ChildActivationEnd	本事件会在路由器激活了路由的子路由时触发。
ActivationEnd	本事件会在路由器激活了某个路由时触发。
NavigationEnd	本事件会在导航成功结束之后触发。
NavigationCancel	本事件会在导航被取消之后触发。 这可能是因为在导航期间某个路由守卫返回了 false。
NavigationError	这个事件会在导航由于意料之外的错误而失败时触发。
Scroll	本事件代表一个滚动事件。

所以，需要判断 路由的事件为 在导航成功结束之后触发的事件(NavigationEnd);

路由变化监听

1. 在构造函数中创建Router对象并声明一个变量

constructor(private router: Router) {
     
}

2. 订阅路由事件并判断事件

constructor(private router: Router) {
     
    (this.router.events.pipe(filter(event => event instanceof NavigationEnd)) as Observable<NavigationEnd>).subscribe(router => {
          
    // do something 
    })
  }

注意：这里一定要对事件实例进行判断，不然会受到上面所涉及到的事件的各种调用。