Доступ детей во вспомогательной маршрутизации: угловой

Question

У меня root маршрутизация определена как

const routes: Routes = [{
    path: '',
    component: HomeComponent
  },
  {
    path: 'module1',
    loadChildren: './module1/module1.module#Module1Module'
  },
  {
    path: '**',
    redirectTo: ''
  }
];

module1.routing.ts имеет:

const routes: Routes = [{
  path: '',
  component: SubModule1Component,
  children: [{
      path: 'mod1child1',
      component: SubMod1Child1Component
    },
    {
      path: 'mod1child2',
      component: SubMod1Child2Component,
      children: [{
          path: '',
          component: Outlet1Component,
          outlet: 'outlet1'
        },
        {
          path: 'newout1',
          component: Outlet1NewComponent,
          outlet: 'outlet1'
        },
        {
          path: '',
          component: Outlet2Component,
          outlet: 'outlet2',
          children: [{
            path: 'childoutlet2',
            component: ChildOutlet2Component,
            outlet: 'outlet2'
          }],
        },
      ],
    },
  ],
  canActivate: [AuthGuardService],
}, ];

Этот код работает, когда я перехожу к /module1/mod1child2, как показано ниже:

MyHTML-страница для изображения выше:

<h1>Child 2</h1>

<button [routerLink]="[{outlets: {'outlet1': ['newout1']}}]">Change Outlet 1</button>
<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>
<div style="display: flex;">
  <div style="display: grid	;border: 1px solid red; width: 50%;height: 100px;float:left">
    <router-outlet name="outlet1"></router-outlet>
  </div>

  <div style="display: grid	;border: 1px solid green; width: 50%;height: 100px;float:left">
    <router-outlet name="outlet2"></router-outlet>
  </div>
</div>

Я не могу загрузить

{ path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}

, нажав:

<button [routerLink]="[{outlets: {'outlet2': ['childoutlet2']}}]">Change Outlet 2</button>

Что я делаю не так.Я пытался

<button [routerLink]="['/module1/mod1child2',{outlets: {'outlet2': ['childoutlet2']}}]">
   Change Outlet 2
 </button>` 

, но, похоже, это не сработало

Answer 1

Я сталкивался с этой ошибкой 2 года назад.

Есть запрос на извлечение, который вы обязательно должны 1) проверить, 2) поднять палец вверх, чтобы он в итоге был объединен https://github.com/angular/angular/pull/25483

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

Далеко от идеала, но он просто работает, и, надеюсь, в какой-то момент он может быть объединен!

Тени, но если вы тоже хотите пойти по этому пути, посмотрите мой комментарий к PR * 1011.*https://github.com/angular/angular/pull/25483#issuecomment-495249672

Answer 2

У вас есть 2 пустых пути, хотя, как @penleychan упомянул об этом как об ошибке, и расскажите о проблеме как, я не считаю это ошибкой, скорее, я чувствую, что вы должны указывать родителя path всегдачем с пустой строкой вроде ''.Вы можете исправить это, указав путь на родительском уровне.

     {
        path: 'mod1child2',
        component: SubMod1Child2Component,
        children: [
          { path: '', component: Outlet1Component, outlet: 'outlet1' },
          { path: 'newout1', component: Outlet1NewComponent, outlet: 'outlet1' },
          {
            path: 'childoutlet2',
            component: Outlet2Component,
            outlet: 'outlet2',
            children: [
                { path: '', component: ChildOutlet2Component , outlet: 'outlet2'}
            ],
          },
        ],
      },

Answer 3

К сожалению, это известная проблема при использовании loadChildren для отложенной загрузки.Но это легко исправить, вам просто нужно всегда указывать имя для маршрута по умолчанию для каждого нового маршрута, который вы определяете.В этом случае

{
    path: 'base',
    component: SubModule1Component,
    children: [
    ...
    ]
}

Answer 4

Это известная проблема с вспомогательным маршрутом в течение достаточно долгого времени без временных рамок для его исправления https://github.com/angular/angular/issues/10726. Очевидно, что это было исправлено в одной точке, но изменения были отменены.По сути, ваш родительский путь не может быть пустым, вам нужно указать путь.

      {
        path: 'out2', <--- cannot be empty
        component: Outlet2Component,
        outlet: 'outlet2',
        children: [
            { path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}
        ],
      },