在Angular 9中实现router.events的单例订阅可以通过创建一个服务来实现。以下是一个实现的示例:
RouterEventsService
的服务:import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class RouterEventsService {
constructor(private router: Router) { }
subscribeToRouterEvents() {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
// 处理路由事件
console.log('NavigationEnd event:', event);
});
}
}
router.events
的组件中,注入RouterEventsService
并调用subscribeToRouterEvents
方法:import { Component, OnInit } from '@angular/core';
import { RouterEventsService } from 'path-to-router-events.service';
@Component({
selector: 'app-my-component',
template: '...',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
constructor(private routerEventsService: RouterEventsService) { }
ngOnInit() {
this.routerEventsService.subscribeToRouterEvents();
}
}
通过以上步骤,你可以在Angular 9中实现对router.events
的单例订阅。每当路由事件触发时,NavigationEnd
事件将被过滤并在控制台中打印出来。你可以根据实际需求在subscribeToRouterEvents
方法中处理路由事件。
注意:以上示例中的代码仅用于演示目的,实际应用中可能需要根据具体情况进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云