Question

我在不会在导航中加载的主路由器出口中命名了路由器出口。

在我的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'
  }

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

以下是显示该问题的代码： https://next.plnkr.co/edit/Qalj52P8VOEUnioU?open=lib%2Fapp.ts&deferRun=1

要使它正常工作，我该怎么做？

Answer 1

通过为路径指定明确的名称而不是默认路径，并使用“ parent”作为第一个参数进行导航，可以使它起作用。

IE。

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

和

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

嵌套子项中的命名路由器出口未加载

1 个答案: