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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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