aux路由只适用于根组件吗？

Question

我在子组件中设置辅助路由时遇到问题,由于某种原因,只有那些辅助路由才能从根组件开始工作.

这是我的路由器设置

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-b​​rowser.umd.js:1900 EXCEPTION:错误:未捕获(在承诺中):错误:无法匹配任何路由:'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所建议的那样,导航到

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

诀窍:

但是,请在页面加载后查看URL.如果我F5现在按,我会回到原点:

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

编辑2:这是github上项目的链接.

Answer 1

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

URL格式(primaryroute//secondaryroute) 括号表示它可能有兄弟路由,并且//是兄弟路由分隔符.

辅助和主要出口被认为是同一父母的兄弟