使用輔助插座導航時發生角度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錯誤

回答

相關問題