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，就会发生同样的事情。

LayoutComponent：

<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>

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

1 个答案: