Angular 4 Router - 挂钩每个路由器的变化
Angular 4 Router - Hook each router changes
我想创建一个Breadcrumb
。
为此,我考虑创建一个服务来处理它。但是我需要挂钩每个路由器更改,每次路由器状态更改时都会使用的方法或 class。
这个挑战必须在我的所有组件中不添加 onActivate 方法的情况下解决,因为我有很多组件。
非常感谢!
您可以使用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);
}
}
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);
});
}
}
我想创建一个Breadcrumb
。
为此,我考虑创建一个服务来处理它。但是我需要挂钩每个路由器更改,每次路由器状态更改时都会使用的方法或 class。
这个挑战必须在我的所有组件中不添加 onActivate 方法的情况下解决,因为我有很多组件。
非常感谢!
您可以使用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);
}
}
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);
});
}
}