使用辅助插座导航时发生角度4错误
问题描述:
我使用辅助插座导航时遇到问题。使用辅助插座导航时发生角度4错误
- 我有一个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'
}
]
}
]
答
改变你的路由下面
{
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>
为什么你有HREF =在导航栏链接“#”? –
我不觉得这很重要吗? @ Jota.Toledo – Andain