Angular 4 路由器 - 挂钩每个路由器的更改答案

【问题标题】：Angular 4 Router - Hook each router changesAngular 4 路由器 - 挂钩每个路由器的更改
【发布时间】：2018-02-05 13:49:08
【问题描述】：

我想创建一个Breadcrumb。

Breadcrumb Wikipedia

为此，我考虑创建一个服务来处理它。但是我需要挂钩每个路由器的更改，每次路由器状态更改时将使用的方法或类。

这个挑战必须在我的所有组件中不添加 onActivate 方法的情况下解决，因为我有很多组件。

非常感谢！

【问题讨论】：

标签： angular service breadcrumbs angular4-router

【解决方案1】：

您可以使用Router events 跟踪路线变化

import { Router, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

class MyService {

  constructor(private router: Router) {
    this.router.events
      .filter(e => e instanceof NavigationEnd)
      .subscribe(e => console.log('Route changed: ' + e.url);

  }

}

【讨论】：

【解决方案2】：

Angular 7 将events 变成了Observable，因此您需要使用不同的代码来过滤NavigationEnd 事件。

class MyService {
  constructor(public router: Router, logger: Logger) {
    router.events
      .pipe(filter(e => e instanceof RouterEvent))
      .subscribe(e => {
        logger.log(e.id, e.url);
      });
  }
}

详情请见https://angular.io/api/router/RouterEvent。

【讨论】：