延迟加载模块上的Angular 9路由器事件

Question

我正在纠结于Angular给出的Router.events观察值。我的应用程序有两个延迟加载的模块。每个都有一个导航菜单，其中显示了一些在应用程序中导航的链接。我希望我的一个链接显示为选中，取决于当前的路线。

问题是，当我使用基于router.events observable的observable的异步管道时，路由事件在angular处理我的模板之前就已经发出了。

我知道，如果我在组件的构造函数中手动订阅，我就可以获得数据。如果我在ngOnInit函数中执行相同的操作，与异步管道相同，则不会发出任何数据。如果我在页面加载后使用链接导航，它工作得很好。

你知道怎样才能做到这一点吗？

谢谢！

Answer 1

如果有人需要它，这就是我修复它的方法。如果您有延迟加载的模块，请确保在根组件上导入此服务，以便订阅在最开始时发生。

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