0

Есть такая структура маршрутов:

{
    path: '', // route /user
    component: UserComponent,
    children: [
      {
        path: 'profile',
        loadChildren: 'src/app/pages/user/profile/profile.module#ProfileModule'
      },
      {
        path: 'search',
        // load module search
      },
      {
        path: ':userId',
        children: [
          {
            path: 'children',
            // load module children
          },
          {
            path: 'connections',
            // load module connections
          },
          {
            path: '',
            loadChildren: 'src/app/pages/feeds/feeds.module#FeedsModule'
          }
        ]
      },
      {
        path: '',
        canActivate: [RedirectUser]
      }
    ]
  }

Внутри UserComponent есть сайдбар с информацией о выбраном пользователе с :userId или информацию авторизированого пользователя. Я сделал UserDataResolver:

{
    path: '', // route /user
    component: UserComponent,
    resolve: {
      user: UserDataResolver
    },
    children: [
    // ...
    ]
}

Но UserDataResolver не видит смену ИД дочерних маршрутов. Как лучше реализовать работу с даными при такой структуре маршрутов?

1 ответ 1

2

Ваша проблема заключается в том, что определитель (resolver) выполнится только 1 раз. Для того, чтобы запускать его каждый раз при смене параметров нужно добавить свойство:

runGuardsAndResolvers: 'paramsChange'

Компонент, который хочет получать новые данные из снепшота, каждый раз при смене параметров, должен подписаться на поток params:

private readonly destroy$ = new Subject<void>();

constructor(route: ActivatedRoute) {
  route.params.pipe(takeUntil(this.destroy$)).subscribe(() => {
    console.log(route.snapshot.data.user);
  });
}

public ngOnDestroy(): void {
  this.destroy$.next();
  this.destroy$.complete();
}

А вообще лучше использовать Router для таких целей нежели поток params:

constructor(private router: Router, private route: ActivatedRoute) {}

public goToAnotherURL(): void {
  this.router.navigateByUrl('/some-url/{some-user-id}').then(() => {
    console.log(this.route.snapshot.data.user);
  });
}

Если у вас компоненты в которых происходит навигация и компоненты, которым нужны данные user из снепшота никак не связаны в общем - я бы советовал вам создать сервис с генератором событий, либо же использовать стейт менеджмент здесь (отлично подходит для решения такого вида проблемы), то есть после навигации какой-то генератор будет что-то генерировать, а кто-то слушать и получать новые данные:

this.router.navigateByUrl('/some-url/{some-user-id}').then(() => {
  someService.user$.next(this.route.snapshot.data.user);
});

И где-то делаете подписку на генератор user$:

someService.user$.pipe(...).subscribe((user) => {
  console.log(user);
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.