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：错误：未捕获（在承诺中）：错误：无法匹配任何路线：＆＃39; test3＆＃39;

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：错误：未捕获（在承诺中）：错误：无法匹配任何路线：＆＃39; shell＆＃39;

编辑2：这是link to the project on github。

Answer 1

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

网址格式为(primaryroute//secondaryroute) 括号表示它可能有兄弟路由，//是兄弟路由分隔符。

Aux和主要出口被认为是同一父母的兄弟姐妹

Answer 2

一些工作实例 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>
  `
})