Angular 9 событий маршрутизатора на ленивом загруженном модуле - PullRequest
Новая
       26

Angular 9 событий маршрутизатора на ленивом загруженном модуле

2 голосов
/ 09 июля 2020

Я борюсь с наблюдаемым Router.events, заданным Angular. В моем приложении два модуля с ленивой загрузкой. У каждого из них есть навигационное меню, в котором отображаются ссылки для навигации по приложению. Я хочу, чтобы одна из моих ссылок отображалась выбранной в зависимости от текущего маршрута.

Дело в том, что когда я использую asyn c pipe наблюдаемого на основе router.events obserable, события маршрутизации уже был отправлен до того, как мой шаблон будет обработан angular.

Я знаю, что если я подпишусь вручную внутри конструктора моего компонента, я могу получить данные. Если я сделаю то же самое внутри функции ngOnInit, как и в случае с конвейером asyn c, данные не будут отправлены. Все работает нормально, если я перехожу по ссылке после загрузки страницы.

Вы знаете, как я могу этого добиться?

Спасибо!

1 Ответ

0 голосов
/ 21 июля 2020

Мне кому то нужно, вот как исправлю. Если у вас есть модули с отложенной загрузкой, обязательно импортируйте эту службу в компонент root, чтобы подписка происходила в самом начале. 

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