Angular 4 路由器 - 挂钩每个路由器的更改
Posted
技术标签:
【中文标题】Angular 4 路由器 - 挂钩每个路由器的更改【英文标题】:Angular 4 Router - Hook each router changes 【发布时间】:2018-02-05 13:49:08 【问题描述】:我想创建一个Breadcrumb
。
Breadcrumb Wikipedia
为此,我考虑创建一个服务来处理它。但是我需要挂钩每个路由器的更改,每次路由器状态更改时将使用的方法或类。
这个挑战必须在我的所有组件中不添加 onActivate 方法的情况下解决,因为我有很多组件。
非常感谢!
【问题讨论】:
【参考方案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。
【讨论】:
以上是关于Angular 4 路由器 - 挂钩每个路由器的更改的主要内容,如果未能解决你的问题,请参考以下文章