Angular8 路由事件使用

利用Angular提供得路由系统可以比较方便地构建项目得框架结构，同时还内置了路由对象事件，可以帮助解决开发中较为常见的问题。

路由事件监听

在app组件中注入Router类，订阅路由的event事件：

constructor(
    private http: HttpClient,
    private router: Router,
    private activatedRoute: ActivatedRoute,
){}
  ngOnInit(): void {
    this.router.events.pipe(
      tap(o => console.log(o))
    ).subscribe(route => {
      console.log(route);
    });
  }

路由状态 有路由导航开始，导航结束；路由配置加载开始，配置加载结束；路由识别，子路由激活开始，激活结束；路由激活开始与结束等。这些路由事件均有各自最佳的场景，但是前后顺序基本是不变的，导航开始是第一个，当其余事件结束，最后导航结束，我们可以根据这个状态去设置业务需求，先查看一般的路由事件中，event包含的内容。

NavigationStart（导航开始）

ActivationEnd（路由激活成功）

NavigationStart（导航结束）

id 即为 navigationId ，被用于保存历史记录，以供浏览器导航回来。只有当这次导航是被 popstate 事件触发时，它才不为空。路由器会把一个 navigationId 赋予每一次路由器过渡/导航。即使用户点击了浏览器的后退按钮，也会创建一个新的 navigationId。 所以，从路由器的视角来看，路由器永远不会 "后退"。借助 restoredState 及其 navigationId，你可以区分开创建新状态和 popstate 事件的行为。 在 popstate 时，你可以恢复一些以前记录的状态（如滚动到的位置）。
navigationTrigger 为导航过程中的触发器，映射关系为：
router.navigateByUrl / router.navigate => imperative
popstate => popstate
hashchange => hashchange
data 为路由设置中提供的路由信息，例如标题等；
其它诸如参数等信息也可以通过这个对象获取。

---

网站标题设置

准确地获取标题，调用内置的Title.setTitle 设置网站标题。我们只需要在路由激活下获取data即可。

this.router.events.pipe(
      // tap(o => console.log(o))
      filter(event => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      mergeMap(route => {
        return route.data;
      }),
    ).subscribe(route => {
      console.log(route);
});

简单解释下上述代码：
filter 选择 NavigationEnd 的原因是找激活路由的快照，只有在导航结束事件只有一次，如果选择 ActivationEnd 也可以，但是此事件触发多次；
获取到当前路由，在当前路由的第一个子路油出现的时候返回子路由；
mergeMap 将原本的Observable打平为数据返回给订阅者接收，结果为：

{
    title:'新闻中心'
}

路由参数处理

添加参数：
1.HTML中添加：<a [routerLink]="['/contact']" routerLinkActive="router-link-active" [queryParams]="{id:222}">联系我们</a>
2.

this.router.navigate(['/contact'], {
  queryParams: {
    id: 123456
  }
});
或者
this.router.navigateByUrl('/contact?id=484584');

获取参数：

constructor(
    private modal: NzModalService,
    private activedRoute: ActivatedRoute
  ) { }

  ngOnInit() {
    this.activedRoute.queryParams.subscribe(params => {
      console.log(params);// { id: 123 }
    });
  }