使用辅助插座导航时发生角度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' 
     } 
    ] 
    } 
]

来源

2017-06-05 Andain

为什么你有HREF =在导航栏链接“＃”？ –

我不觉得这很重要吗？ @ Jota.Toledo – Andain

改变你的路由下面

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

来源

2017-06-05 13:56:21

感谢您的建议。当我将路线定义更改为您的建议时，我无法再导航到该网页。我收到错误'错误：无法匹配任何路由。 URL段：'accounts/1/overview''并被重定向到我的默认路由'/ login' – Andain

我真的不认为你可以将二级插座组件嵌套在你的路由定义中的根插座组件中，因为每个命名插座应该有自己的一套路线和他们自己的组件。检查我的更新的答案，看看我的意思。 –

但它很好地工作，直到我不得不改变什么组件加载到'content-outlet'？ – Andain

使用辅助插座导航时发生角度4错误

回答

相关问题