辅助路由仅适用于根组件吗? [英] Do aux routes work for the root component only?

问题描述

我无法在子组件中设置辅助路由，由于某些原因，只有那些从根组件开始的辅助路由才起作用.

I'm having trouble setting up auxiliary routes in child components, for some reason only those auxiliary routes work that start at the root component.

这是我的路由器设置

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与ShellComponent和DepartmentDetailComponent一起呈现在AppComponent内部:

then the output is as expected, that is, Test2Component is rendered inside AppComponent, along with ShellComponent and DepartmentDetailComponent:

主要出口以蓝色显示，辅助出口以红色显示.

Primary outlets show up in blue, auxiliary outlets in red.

但是，如果我尝试导航到

If, however, I try to navigate to

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

我收到一条错误消息:

platform-b​​rowser.umd.js:1900例外:错误:未捕获(已承诺):错误:无法匹配任何路由:'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 Agarwal所建议，导航至

As suggested by Arpit Agarwal, navigating to

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

做到了:

但是，请在页面加载后查看URL.如果现在按F5，我将回到第一个方框:

However, take a look at the URL after page load. If I press F5 now, I'm back to square one:

platform-b​​rowser.umd.js:1900例外:错误:未捕获(已承诺):错误:无法匹配任何路由:'shell'

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

这是链接到github上的项目的链接.

推荐答案

尝试使用 http://localhost:3000/shell/(部门/1//aux2:test3)

URL的格式为(primaryroute//secondaryroute) 括号表明它可能具有同级路由，而//是同级路由分隔符.

URL has format (primaryroute//secondaryroute) parentheses tells it may have sibling routes and // is sibling route separator.

辅助和主要出口被视为同一个父级上的兄弟姐妹

Aux and primary outlets are considered sibling on same parent

这篇关于辅助路由仅适用于根组件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！