在辅助路由中访问子节点：Angular

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 提到它是一个错误并分享这个问题，我不认为它是一个错误，相反，我觉得你应该给出一个 parent path 总是而不是像 '' 这样的空字符串。您可以通过在 parent 级别指定路径来修复它。

     {
        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

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

有一个拉取请求，您绝对应该 1) 检查，2) 用大拇指赞成它最终被合并 https://github.com/angular/angular/pull/25483

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

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

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

在辅助路由中访问子节点：Angular

Accessing children in auxiliary routing : Angular

angular-routing

angular

angular-auxiliary-routes