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时，此代码有效：

我上图中的HTML页面是：

<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

这是辅助路由的一个已知问题，已经存在了很长时间，没有修复它的https://github.com/angular/angular/issues/10726时间框架。显然，它固定在某一点，但更改已还原。基本上，您的父路径不能为空，您需要提供一个路径。

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

Answer 2

您有2条空路径的问题，尽管正如@penleychan提到它是一个bug并与其他人分享问题一样，我不认为它是bug，相反，我认为您应该给父母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

两年前我遇到了这个错误。

有一个拉取请求，您绝对应该1）签出，2）用竖起大拇指进行投票，以便最终合并https://github.com/angular/angular/pull/25483

我对此感到非常厌倦，并且不想重命名我的应用程序中的所有空路由以使其正常工作，因此我在npm模块被使用后最终通过postinstall钩子修补了该修补程序。拿来...

远非理想，但它确实有效，希望它可以在某个时候合并！

阴暗，但如果您也想这样做，请查看我对PR的评论 https://github.com/angular/angular/pull/25483#issuecomment-495249672

在辅助路由中访问子级：角度

4 个答案: