Есть ли способ прикрепить функцию обратного вызова к маршруту в модуле угловой маршрутизации?

Question

Я создаю большое приложение на Angular, которое использует функциональные модули с дочерними маршрутами. Каждый дочерний раздел визуализируется с помощью специального макета раздела, который для MVP устанавливает состояние для дочерних страниц. Например:

/app/projects/yJEBuuOmmRv7WuVomGkb загрузит проект yJEBuuOmmRv7WuVomGkb в контейнер состояния на любых дочерних маршрутах.

Я экспериментировал с наблюдением событий маршрутизатора, но столкнулся с некоторыми сложными ситуациями, когда приложение работает с разными маршрутизаторами в разных контекстах (дочерний или родительский).

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

Например, что-то вроде этого псевдокода:

const routes: Routes = [
  {
    path: '',
    component: PageLayoutComponent,
    children: [
      {
        path: '',
        component: PagesComponent
      },
      {
        path: 'admin/settings',
        component: PageSettingsComponent
      },
      {
        path: 'admin/publishing',
        component: PagePublishingComponent
      },
      {
        path: ':pageId',
        component: PageDetailLayoutComponent,
        
        // pseudo code!!!
        onRoute: (params => {
          StateContainer.set('page', params.pageId);
        }),
        
        children: [
          {
            path: '',
            component: PageComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PagesRoutingModule { }

Answer 1

У вас есть несколько вариантов добавления данных в маршруты.

1. свойство данных в вашем маршруте:

пример:

{
   path: 'heroes',
   component: HeroListComponent,
   data: { title: 'Heroes List' 
 }

Из угловых документов:

Свойство data на третьем маршруте - это место для хранения произвольных данные, связанные с этим конкретным маршрутом. Свойство данных доступны в пределах каждого активированного маршрута. Используйте его для хранения таких предметов, как заголовки страниц, тексты и другие статические данные, доступные только для чтения. Вы будете используйте средство защиты разрешения для извлечения динамических данных позже в руководстве.

2. Resolvers

пример:

{
    path: 'heroes',
    component: HeroListComponent,
    resolve: { hero: HeroResolver }
}

Из угловых документов:

В итоге вы хотите отложить рендеринг компонента до необходимые данные были получены.

Для получения дополнительной информации: https://angular.io/guide/router#resolve-guard Так что это означает, что если вы вызываете конечную точку API, которая передает данные вашему компоненту, вы должны использовать resolver.

Может быть, вы могли бы вызвать StateContainer.set в компоненте ngOnInit метод.