輔助路由僅適用於根組件嗎？

我在設置子組件中的輔助路由時遇到問題，出於某種原因，只有那些輔助路由在根組件開始工作。輔助路由僅適用於根組件嗎？

這是我的路由器設置

export const routes: RouterConfig = [ 
    { path: 'test1', component: Test1Component }, 
    { path: 'test2', component: Test2Component, outlet: 'aux'},   
    { path: 'shell', component: ShellComponent, children: [ 
     { path: 'department/:id', component: DepartmentDetailComponent }, 
     { path: 'test3', component: Test3Component, outlet: 'aux2' }   ] } 
];

如果我瀏覽到

http://localhost:3000/shell/department/1(aux:test2)

則輸出不如預期，也就是說，Test2Component是內部AppComponent呈現，與ShellComponent和DepartmentDetailComponent沿：

主要網點以藍色顯示，輔助網點以紅色顯示。

但是，如果我嘗試導航到

http://localhost:3000/shell/department/1(aux2:test3)

我得到一個錯誤信息：

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'test3'

router-outlets如下：

app.component.ts（AUX ：test2）

<div class="app"> 
    <h1>App</h1> 
    <div class="primary-outlet"> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="aux-outlet"> 
    <router-outlet name="aux"></router-outlet> 
    </div> 
</div>

個

shell.component.ts（AUX2：TEST3）

<div class="component"> 
    <h1>Shell</h1> 
    <div class="primary-outlet"> 
    <router-outlet></router-outlet> 
    </div> 
    <div class="aux-outlet"> 
    <router-outlet name="aux2"></router-outlet> 
    </div> 
</div>

我缺少什麼？

編輯：正如Arpit阿加瓦爾認爲，導航到

http://localhost:3000/shell/(department/1(aux2:test3))

的伎倆：

然而，看看頁面加載後的URL。如果我按F5現在，我又回到了原點：

platform-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'shell'

編輯2：這裏的link to the project on github。

來源

2016-07-06 Thorsten Westheider

你可以嘗試的http：//本地主機：3000 /殼/（部/ 1（aux2：test3））這不會顯示test2comp，因爲URL沒有它的路徑。 –

這實際上是在aux2中呈現Test3，但有一個問題：在頁面加載之後，URL更改爲http：// localhost：3000/shell /（/（department/1 // aux2：test3）），然後整個事件中斷在頁面刷新時再次按下「無法匹配任何路線：'shell'」。 –

嘗試http：// localhost：3000/shell /（department/1 // aux2：test3）或http：// localhost：3000/shell /（department; id = 1 // aux2：test3）。您可能需要從路由定義中刪除Id以便以後使用 –

使用try http://localhost:3000/shell/(department/1//aux2:test3)

URL具有格式(primaryroute//secondaryroute) 括號告訴它可能有兄弟姐妹路線和//是同級航線分離。

輔助和主要出口被認爲是兄弟姐妹在同一父

來源

2016-07-06 13:08:03

'routerLink =「/ shell（department/1 // aux2：test3）」'似乎不工作，但'router.navigateByUrl（「/ shell（department/1 // aux2：test3）」）;'工程正好。 – Hector

是的。在routerLink中似乎有一些問題導航到輔助路由。不確定是否記錄了錯誤。將檢查和更新 –

一些工作示例 click here

要點

<a [routerLink]="['/component-one',{ outlets: { 'sidebar': ['component-aux'] } }]">Component One</a> 

@Component({ 
    selector: 'component-one', 
    template: `Component One 
    <div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div> 
    <div style="border: 2px solid blue; padding: 1rem;"> 
     <router-outlet name="sidebar"></router-outlet> 
    </div> 
    ` 
})

來源

2016-11-29 18:46:49

輔助路由僅適用於根組件嗎？

回答

相關問題