Search route data in angular router events

README.md

Поиск данных в роутах Angular на основе событий роутера

Пример:

const router = inject(Router);
router.events
  .pipe(
    deepSearchForRouteData<MyRouteData>((data) => !!data && Object.hasOwn(data, 'config')),
    map((data) => data?.config),
    distinctUntilChanged()
  )
  .subscribe(console.log);

deep-search-for-route-data.ts

import {
  ActivationEnd,
  NavigationCancel,
  NavigationEnd,
  NavigationError,
  NavigationStart,
  Route,
  Router,
} from '@angular/router';
import { EMPTY, filter, map, race, switchMap, take } from 'rxjs';

export const deepSearchForRouteData =
  <T = Route['data']>(predicate: (data: T) => boolean) =>
  (source: Router['events']) => {
    const skipData$ = source.pipe(
      filter((event) => event instanceof NavigationError || event instanceof NavigationCancel),
      take(1),
      switchMap(() => EMPTY)
    );

    const emptyData$ = source.pipe(
      filter((event) => event instanceof NavigationEnd),
      take(1),
      map(() => undefined)
    );

    const lastData$ = source.pipe(
      filter((event): event is ActivationEnd => event instanceof ActivationEnd),
      filter((event) => event.snapshot.outlet === 'primary'),
      map((event) => event.snapshot.data as T),
      filter(predicate),
      take(1)
    );

    return source.pipe(
      filter((event) => event instanceof NavigationStart),
      switchMap(() => race([lastData$, emptyData$, skipData$]))
    );
  };