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

Question

我想创建一个Breadcrumb.

面包屑维基百科

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

必须解决这个挑战而不在我的所有组件中添加onActivate方法,因为我有很多它们.

十分感谢 !

Answer 1

您可以使用路由器事件来跟踪路由更改

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);

  }

}

Answer 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。