angular - 在辅助路由中访问子进程: 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

我两年前就遇到过这个错误。

有一个拉取请求，您绝对应该 1) checkout ，2) 点赞，这样它最终会被合并 https://github.com/angular/angular/pull/25483

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

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

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