2

我将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>`

但这似乎也不起作用

4

4 回答 4

2

我在 2 年前遇到过这个错误。

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

我对此感到非常厌倦，不想重命名我的应用程序中的所有空路由以使其正常工作，因此我最终postinstall在获取 npm 模块后从挂钩中修补了该修复程序...

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

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

于 2019-05-30T10:19:38.470 回答
1

loadChildren不幸的是，在用于延迟加载时这是一个已知问题。但它很容易修复，您只需要为您定义的每条新路由始终提供默认路由的名称。在这种情况下

{
    path: 'base',
    component: SubModule1Component,
    children: [
    ...
    ]
}
于 2019-05-29T13:18:01.350 回答
1

这是 aux route 很长一段时间以来的一个已知问题，没有修复它的时间框架https://github.com/angular/angular/issues/10726。显然，它曾一度被修复，但更改被恢复了。基本上你的父路径不能为空，你需要提供一个路径。

      {
        path: 'out2', <--- cannot be empty
        component: Outlet2Component,
        outlet: 'outlet2',
        children: [
            { path: 'childoutlet2', component: ChildOutlet2Component , outlet: 'outlet2'}
        ],
      },
于 2019-05-24T04:49:26.393 回答
1

你有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'}
            ],
          },
        ],
      },
于 2019-05-24T06:07:56.733 回答