嵌套子级中的命名路由器出口未加载答案

【问题标题】：Named router-outlet in nested child not loading嵌套子级中的命名路由器出口未加载
【发布时间】：2018-08-22 19:02:49
【问题描述】：

我在一个不会加载导航的主路由器插座中命名了路由器插座。

在我的 app.ts 模板中，我有：

<router-outlet></router-outlet>   <!-- Contains the parent-->
<router-outlet name="aux1"></router-outlet></div>  <!-- Works Fine -->

在我的父模板中，我有：

<router-outlet></router-outlet>
<router-outlet name="aux2"></router-outlet><!-- Does not Work! -->

我的主路径路由在这里：

const appRoutes: Routes = [
{
    path: '',
    component: ParentComponent,
    children: [
      {
        path: '',
        component: ChildAComponent
      }
    ]
}];

我的辅助输出路由在这里：

 { // It has no problems navigating to this route, but does not update UI
    path: 'show-child-b',
    component: ChildBComponent,
    outlet: 'aux2'
  },
  { // Works fine
    path: 'show-sibling-c',
    component: SiblingCComponent,
    outlet: 'aux1'
  }

当我使用this.router.navigate([{outlets: {aux2: 'show-child-b'}}]); 导航aux2 出口时，它无法更新子router-outlet。

这是一个显示问题的 plunker： https://next.plnkr.co/edit/Qalj52P8VOEUnioU?open=lib%2Fapp.ts&deferRun=1

我必须做些什么才能让它工作？

【问题讨论】：

标签： angular angular6 router-outlet

【解决方案1】：

我通过为路径指定显式名称而不是默认路径并使用“父级”作为第一个参数进行导航来使其工作。

IE：

const appRoutes: Routes = [
{
    path: 'parent',
    component: ParentComponent,
    children: [
      {
        path: 'childA',
        component: ChildAComponent
      }
    ]
}];

和

this.router.navigate(['parent',{outlets: {aux2: 'show-child-b'}}]);

【讨论】：