Angular 11 с проблемой rxjs - TS2769: этому вызову не соответствует ни одна перегрузка

Я хотел бы подписаться на события NavigationEnd в Angular 11, используя фильтр из rxjs.

Часть subscribe((event: NavigationEnd) ... вызывает следующую проблему

Текущее решение:

TS2769: этому вызову не соответствует ни одна перегрузка. Перегрузка 1 из 5, '(наблюдатель ?: NextObserver | ErrorObserver | CompletionObserver | undefined): Subscription', выдала следующую ошибку. Аргумент типа '(event: NavigationEnd) = ›void' не может быть назначен параметру типа 'NextObserver | ErrorObserver | CompletionObserver | неопределенный'. Свойство «complete» отсутствует в типе «(event: NavigationEnd) =› void », но является обязательным для типа« CompletionObserver ». Overload 2 of 5, '(next ?: ((value: Event) = ›void) | undefined, error ?: ((error: any) =› void) | undefined, complete ?: (() = ›void) | undefined): подписка », выдавала следующую ошибку. Аргумент типа '(event: NavigationEnd) = ›void' не может быть назначен параметру типа '(value: Event) =› void'. Типы параметров «событие» и «значение» несовместимы. Тип «Событие» нельзя присвоить типу «NavigationEnd». Свойство urlAfterRedirects отсутствует в типе RouterEvent, но является обязательным для типа NavigationEnd.

См. Код конструктора ниже с указанным фрагментом кода:

export class NavigationService implements OnDestroy {
  private readonly routeChange: Subscription | undefined;
  private previousUrl: string | undefined;
  private ignoredRoutes = ['/signup', '/login', '/reset'];

  constructor(private router: Router) {
    this.routeChange = router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        if (!this.ignoredRoutes.includes(event.url)) {
          this.previousUrl = event.url;
        }
      });
  }

  ngOnDestroy(): void {
    if (this.routeChange) {
      this.routeChange.unsubscribe();
    }
  }

  public routeToPreviousContent(): void {
    //route home if undefined
    const targetUrl = this.previousUrl ? this.previousUrl : '';
    this.router.navigate([targetUrl]).then();
  }
}

Подходит ли TS2769 в данном случае вообще? Я предполагаю, что труба фильтра rxjs с event instanceof NavigationEnd просто не распознается ?!


typescript angular rxjs angular11
person TeaCups20    schedule 09.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Функция, переданная фильтру, не является защитой типа, но вы можете указать тип следующим образом:

constructor(private router: Router) {
  this.routeChange = router.events
    .pipe(
      filter((event): event is NavigationEnd => event instanceof NavigationEnd)
    )
    .subscribe(event => {
      // "event" here is now of type "NavigationEnd"
    });
}
person Steve Holgado    schedule 09.03.2021