Angular框架中去监听路由的改变（Router中的event

1、前言

在Angular框架中，有时需要监听页面的路由去做一些操作，也可能需要监听当前路由的变化，根据路由路径的关键字去控制一些组件的导入，以及使用的最多的情况：动态路由传参，就是多个页面的结构相同，只有细微的差异，然后根据id的不同后台传给前端不同的数据，这时就需要使用到监听路由。

2、路由变化的主要事件

主要使用Router的events: Observable<Event>属性

事件名称	触发条件
NavigationStart	在导航开始时触发
RouteConfigLoadStart	会在Router惰性加载，某个路由配置之前触发
RouteConfigLoadEnd	会在Router惰性加载，某个路由配置之后触发
RoutesRecognized	事件会在路由器解析完URL的时候去识别相应的路由时触发
GuardsCheckStart	事件会在路由器开始Guard阶段之前触发
ChildActivationStart	事件会在路由器开始激活路由的子路由时触发
ActivationStart	事件会在路由器开始激活某个路由时触发
GuardsCheckEnd	事件会在路由器成功完成了Guard阶段时触发
ResolveStart	事件会在Router开始解析(Resolve)阶段时触发
ResolveEnd	事件会在路由器成功完成了路由的解析（Resolve）阶段时触发
ChildActivationEnd	事件会在路由器激活了路由的子路由时触发
ActivationEnd	事件会在路由器激活某个路由时触发
NavigationEnd	事件会在导航成功结束之后触发
NavigationCancel	事件在导航被取消之后触发
NavigationError	事件会在导航发生错误时触发
Scroll	事件代表的一个滚动事件

因此，需要判断路由的事件为在导航成功结束之后触发的事件（NavigationEnd）

3、开始监听路由

我们可以在导航成功结束时做一些逻辑处理

import { Component, OnInit, Input } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

@Component({
  selector: 'app-home',
  template: `
  <h1>Posts </h1>
  `,
  styleUrls: ['./home.component.less']
})

export class HomeComponent implements OnInit {
  constructor(private router: Router) {
      this.router.events.subscribe(event => { 
        if(event instanceof NavigationEnd){
          console.log(event);
        }    
      })
  }

  ngOnInit(): void {
    
  }
}

image.png

由于因为Angular路由器是reactive响应式的，所以我们可以使用 RxJS 实现更多的方式去处理

import { Component, OnInit, Input } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { map, take, mapTo, filter } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  template: `
  <h1>Posts </h1>
  `,
  styleUrls: ['./home.component.less']
})

export class HomeComponent implements OnInit {
  constructor(private router: Router) {
      this.router.events
      .pipe(filter((event: any) => event instanceof NavigationEnd))
      .subscribe((event: any) => {
        console.log(event);
      })
  }

  ngOnInit(): void {
    
  }
}

我们可以在RXJS中导入filter等方法用来过滤路由器实例，这样我们也能获取到我们路由导航以及做一些相应的一些操作。