使用辅助插座导航时出现 Angular 4 错误

Question

我在使用辅助插座进行导航时遇到问题。

• 我有一个 LayoutComponent 加载到主路由器插座中。
• LayoutComponent 包含一个名为 content-outlet 的辅助出口

到目前为止，一切都很好，我可以导航到例如/accounts/1/overview 并让content-outlet 加载正确的组件（OverviewComponent）。但是，当我单击侧边栏中的链接导航到 /accounts/1/stats 路线时，我收到一个错误：

Error: Cannot activate an already activated outlet

如果我首先导航到/accounts/1/stats，然后尝试激活/accounts/1/overview，也会发生同样的事情。

布局组件：

<app-sidebar></app-sidebar>
<div class="topbar-content-wrapper">
  <app-topbar></app-topbar>
  <div class="content-wrapper">
    <router-outlet name="content-outlet"></router-outlet>
  </div>
</div>

侧边栏导航：

<a href="#" [routerLink]="[ '/accounts', accountId, 'overview' ]">Overview</a>
<a href="#" [routerLink]="[ '/accounts', accountId, 'stats' ]">Stats</a>

路线：

{
path: 'accounts/:accountid',
component: LayoutComponent,
canActivate: [AuthService],
children: [
  {
    path: 'stats',
    children: [
      {
        path: '',
        component: StatsComponent,
        outlet: 'content-outlet'
      }
    ]
  },
  {
    path: 'overview',
    children: [
      {
        path: '',
        component: OverviewComponent,
        outlet: 'content-outlet'
      }
    ]
  }
]

Answer 1

将您的路线更改为以下

{
   path: 'accounts/:accountid',
   component: LayoutComponent,
   canActivate: [AuthService],
},
{
    path: 'stats',
    component: StatsComponent,
    outlet: 'content-outlet'
 },
{
    path: 'overview',
    component: OverviewComponent,
    outlet: 'content-outlet'
}

还有你的侧边栏导航链接：

<a [routerLink]="[{ outlets: { content-outlet: ['overview'] } }]">Overview</a>
<a [routerLink]="[{ outlets: { content-outlet: ['stats'] } }]">Stats</a>