угловая многоуровневая дочерняя маршрутизация - PullRequest
Новая
       8

угловая многоуровневая дочерняя маршрутизация

0 голосов
/ 22 января 2019

У меня есть следующий маршрут конфигурации, сгруппированный по модулям:

Вверху: 

imports: [
  ContentModule,
  RouterModule.forRoot([
  { path: 'Home', component: HomeComponent },
  { path: '', component: HomeComponent, pathMatch: 'full' }
])

Следующий модуль (ContentModule): 

imports: [
  ApplicationsModule,
  RouterModule.forChild([
  {
    path: 'Content', component: ContentComponent, canActivate: [AuthGuardService], children:
    [
      { path: 'Apps/List', component: ApplicationListComponent, canActivate: [AuthGuardService], resolve: { applications: ApplicationListResolver } },
      { path: 'Apps/Details/:applicationID', component: ApplicationTabContainerComponent, canActivate: [AuthGuardService] },
      { path: 'Apps/NewApp', component: NewApplication, canActivate: [AuthGuardService] },
      { path: 'Documentation', component: DocComponent },
      { path: '', redirectTo: 'App/List', pathMatch: 'full' },
      { path: '**', redirectTo: 'App/List' }
    ]
  }
])

И последнийmodule (ApplicationsModule): 

imports: [
  RouterModule.forChild([
  { path: 'info', component: ApplicationDetailComponent, canActivate: [AuthGuardService], resolve: { application: ApplicationDetailResolver } },
  { path: 'CDN', component: FileManager, canActivate: [AuthGuardService], resolve: { fileStorageData: FileManagerResolver } },
  { path: '', redirectTo: 'info', pathMatch: 'full' }
])

Хорошо, если я перехожу к http://localhost:8253/Content/Apps/Details/Web-Site-App/info, я получаю следующую ошибку:

Невозможно сопоставить никакие маршруты.Сегмент URL: «Контент / Приложения / Детали / Portal-Web-Drupal / inf»

Кто-нибудь знает, почему я получаю эту ошибку?

Я структурировал модули на этомпуть, потому что ContentComponent отображается на первом маршрутизаторе-выходе (у него есть панель навигации (то есть статический контент) и ContentComponent).ContentComponent имеет выход-маршрутизатор, который отображает DocumentationComponent или ApplicationListComponent или NewApplicationComponent или ApplicationTabContainerComponent.ApplicationTabContainerComponent имеет выход-маршрутизатор, который может отображать ApplicationDetailComponent или FileManagerComponent.

Возможно, проблема в том, что у меня не может быть более двух уровней выходов-маршрутизаторов, а у меня три:

  • grandparent - это выход-маршрутизатор приложения, которое отображает компонент контента
  • parent (ContentComponent) - это выход-маршрутизатор, который отображает applicationList или newApplication или applicationTabContainer
  • childs, которыеявляются компонентами, которые отображаются внутри маршрутизатора-выхода ApplicationTabContainerComponent.

1 Ответ

0 голосов
/ 22 января 2019

Чтобы установить иерархию, вам понадобятся две вещи:

1) Розетка маршрутизатора в родительском компоненте (как это выглядит у вас).

2) Свойство children (когда маршруты определены в модуле) или свойство loadChildren (когда маршруты определены в отдельном модуле) для родительского маршрута, чтобы сообщить маршрутизатору, какие маршруты являются дочерними маршрутами.

ApplicationTabContainerComponent отсутствуетchildren или loadChildren свойство маршрута.Иначе ничто не связывает маршруты, определенные в модуле Applications, с этим маршрутом.

Немного сложно получить правильный синтаксис без кода ... но это будет выглядеть примерно так: 

imports: [
  RouterModule.forChild([
  {
    path: 'Content', component: ContentComponent, canActivate: [AuthGuardService], children:
    [
      { path: 'Apps/List', component: ApplicationListComponent, canActivate: [AuthGuardService], resolve: { applications: ApplicationListResolver } },
      { 
        path: 'Apps/Details/:applicationID', 
        component: ApplicationTabContainerComponent, 
        canActivate: [AuthGuardService],
        loadChildren: './yourpath/applications.module#ApplicationsModule`
      },
      { path: 'Apps/NewApp', component: NewApplication, canActivate: [AuthGuardService] },
      { path: 'Documentation', component: DocComponent },
      { path: '', redirectTo: 'App/List', pathMatch: 'full' },
      { path: '**', redirectTo: 'App/List' }
    ]
  }
])

Этот синтаксис может быть не совсем правильным, но он должен дать вам идею.(Я использовал loadChildren только для маршрутов без компонентов.)

Я приведу пример здесь: https://www.youtube.com/watch?v=LaIAHOSKHCQ

...