angular - 延迟加载模块上的 Angular 9 路由器事件
问题描述
我正在努力解决Angular给出的Router.events observable。我的应用程序有两个延迟加载的模块。每个都有一个导航菜单,显示一些链接以在应用程序内部导航。我希望我的链接之一根据当前路线显示为选中状态。
问题是,当我使用基于 router.events obserable 的 observable 的异步管道时,路由事件在我的模板由 angular 处理之前已经发出。
我知道如果我在组件的构造函数中手动订阅,我可以获得数据。如果我在 ngOnInit 函数中执行相同的操作,与异步管道相同,则不会发出数据。如果我在页面加载后使用链接导航,它工作正常。
你知道我如何实现这一目标的方法吗?
谢谢 !
解决方案
我有人需要它,这就是我修复它的方法。如果您有延迟加载的模块,请确保在根组件上导入此服务,以便在最开始时进行订阅。
import {Injectable} from '@angular/core';
import {Observable, ReplaySubject} from 'rxjs';
import {filter, map, tap} from 'rxjs/operators';
import {NavigationEnd, Router} from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class RouterService {
_events = new ReplaySubject<string>();
constructor(private readonly router: Router) {
router.events.pipe(
filter(e => e instanceof NavigationEnd),
map(e => e as NavigationEnd),
map((e: NavigationEnd) => e.urlAfterRedirects),
tap((url) => this._events.next(url))
).subscribe();
}
get events(): Observable<string> {
return this._events.asObservable();
}
}
推荐阅读
- gtk - 如何使用 Python+PyGObject 的 GObject.bind_property 函数进行 2 路数据绑定?
- html - 如何将链接放置在文本的右侧?
- ansible - Ansible - 在远程主机上复制多个文件
- java - 重复从Java中的arraylist中选择和删除一个随机条目
- flutter - 如何调整 Flutter 表日历的大小
- dns - 带有自定义域的 Ejabberd 配置
- java - 当我们为阶段分配目标时,执行顺序将如何执行?
- postgresql - 将 LEFT JOIN 查询转换为 Ecto
- r - 将字符转换为数字
- python - 下载问题-Jupyter Notebook