Как сделать работу с именованной маршрутизацией работать с loadChildren?

Я создал два компонента, касающихся проблемы с маршрутизацией loadChildren и навигацией на выходе. По какой-то причине наличие пустого базового пути в загруженном дочернем модуле не работает с выходной навигацией.

В этом примере нажатие на ссылку "Контакты" завершается неудачей.

Приложение-routing.module

const appRoutes: Routes = [
  { path: 'admin', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admin', pathMatch: 'full' }
];

админ-routing.module

const adminRoutes: Routes = [
{ 
  path: '', 
  component: AdminComponent,
  children: [ 
    {
      path: 'compose',
      component: ComposeMessageComponent,
      outlet: 'popup'
    }
  ]
}];

В этом примере нажатие на ссылку "Контакты" работает.

Приложение-routing.module

const appRoutes: Routes = [
  { path: 'admi', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admi/n', pathMatch: 'full' }
];

админ-routing.module

const adminRoutes: Routes = [
{ 
  path: 'n', 
  component: AdminComponent,
  children: [ 
    {
      path: 'compose',
      component: ComposeMessageComponent,
      outlet: 'popup'
    }
  ]
}];

Разница заключается в app-routing.module и admin-routing.module. В рабочем примере нет пустого пути для admin-routing.module. Согласно документации, пустой путь должен работать.

Ответ 1

Первый сегмент массива параметров ссылки вашей директивы routerLink для "Контакта" относится к родительскому маршруту и соответствующему маршрутизатору-выходу для шаблона компонента, содержащего routerLink. Вам нужно было бы поместить конфигурацию маршрута для названного маршрутизатора-выхода в конфигурацию приложения-маршрутизации вместо конфигурации административной маршрутизации для сценария "сбой", но это, вероятно, нежелательно из-за разделения проблем среди других принципов.

Разница между первым примером, который вы предоставили, который "дает сбой", и вторым примером, который "работает", заключается в том, как angular маршрутизатор redirectTo в конфигурации маршрута "возвращается" во время сопоставления с образцом маршрутов; однако второй ключевой аспект - это поведение, которое оценивается в результате сопоставления, не должно влиять на поведение сопоставления с шаблоном маршрута.

В сценарии "сбой" выполняется сопоставление сегмента маршрута, redirectTo изменяет URL-адрес на "/admin", маршрутизатор сопоставляет путь "/admin", маршрутизатор автоматически сопоставляет пустую строку "" в конфигурации admin-routing, маршрутизация завершена. Во втором "успешном" сценарии путь соответствует ", redirectTo соответствует первому сегменту"/admi ", маршрутизатор оценивает второй сегмент URL"/n ", поскольку маршрутизация еще не завершена, маршрутизатор просматривает Конфигурация app-routing для совпадений '/n' и не находит совпадений, конфигурация admin-routing затем оценивается, и сопоставляется второй сегмент '/n', маршрутизатор автоматически сопоставляет пустую строку '' маршрутизация завершена. Проблема сценария "сбой" заключается в том, что массив параметров ссылки <a [routerLink]="[{ outlets: {popup: ['compose']}}]">Contact</a> представляет собой пустую строку, а URL-адрес в настоящее время равен "/admin". Да, ключевым отличием является местоположение в иерархии, в котором возникает пустая строка, автоматически оцениваемая маршрутизатором, другими словами, местоположение, в котором маршрутизатор выполняет оценку конфигурации маршрутов. Это незаметно, но пустая строка, оцененная в сценарии "сбой", завершается на верхнем уровне AdminComponent; поэтому при поиске по шаблону маршрутизатора автоматически выполняется поиск пустой строки '' на родительском маршруте 'admin', как результат redirectTo в конфигурации маршрутизации приложения. Во втором сценарии "успех" оценка маршрутизатора конфигурации маршрутов завершается на дочернем пути "" родительского "/n", который находится на уровне ниже в иерархии по сравнению со сценарием конфигурации маршрутов администратора "завершается неудачей"; следовательно, во втором сценарии "успех" на "пустую строку, которая автоматически оценивается, не влияет перенаправление из конфигурации маршрутизации приложения при нажатии <a [routerLink]="['', { outlets: {popup: ['compose']}}]">Contact</a>.

Чтобы исправить конфигурацию маршрутизации сценария "сбой", вам нужно изменить либо первый сегмент массива параметров ссылок вашей директивы Contact routerLink, указав путь администратора, т.е. <a [routerLink]="['/admin', { outlets: {popup: ['compose']}}]">Contact</a>, либо изменить иерархию, в которой пустая строка " 'путь, который автоматически оценивается при завершении маршрутизатора.

Чтобы исправить это, изменив иерархию конфигурации маршрутов, при которой путь пустой строки '', автоматически оцениваемый маршрутизатором как родитель, важно отметить, что родитель пустой строки '' path не должен быть пустой строкой ' ' дорожка. В примере:

const devNavRoutes: Routes = [
  {
    path: '',
    component: DevNavContainerComponent, canActivate: [ DevNavAuthGuard1Service ],
    children: [
      { path: '', canActivateChild: [ DevNavAuthGuard1Service ],
        children: [
          { path: '', redirectTo: 'dashboard' },
          { path: 'dashboard', component: DevNavDashboardComponent,
            children: [
              { path: ':auxiliaryId', component: DevNavAuxiliaryComponent, outlet: 'auxiliary'},
              { path: ':ancillaryId', component: DevNavAncillaryComponent, outlet: 'ancillary' }
            ] },
          { path: ':id', component: DevNavDashboardComponent,
            children: [
              { path: ':auxiliaryId', component: DevNavAuxiliaryComponent, outlet: 'auxiliary'},
              { path: ':ancillaryId', component: DevNavAncillaryComponent, outlet: 'ancillary' }
            ] },
        ] },
    ] } 
];

Примечание:

// dev-nav-container.component
<router-outlet></router-outlet>

// dev-nav-dashboard.component
<router-outlet name="auxiliary"></router-outlet> 
<router-outlet name="ancillary"></router-outlet>

Ответ 2

Решение, приведенное ниже, подойдет для желаемого количества торговых точек. Вы можете иметь то же самое в second.component.ts.

first.module.ts

const routerConfig: Routes = [
    {path: '', component: FirstComponent},

    {
        path: 'posts', component: FirstComponent, children: [{
            path: '',
            loadChildren: './second.module#SecondModule'
        }]
    }
}

first.component.html

// ....
<router-outlet></router-outlet>
// ....