辅助路由是否仅适用于根组件？答案

【问题标题】：Do aux routes work for the root component only?辅助路由是否仅适用于根组件？
【发布时间】：2016-07-06 12:11:52
【问题描述】：

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

这是我的路由器设置

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 例外：错误：未捕获（在承诺中）：错误：无法匹配任何路由：'test3'

router-outlets如下：

app.component.ts（辅助：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-browser.umd.js:1900 例外：错误：未捕获（在承诺中）：错误：无法匹配任何路由：'shell'

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

【问题讨论】：

你可以试试localhost:3000/shell/(department/1(aux2:test3)) 这不会显示 test2comp 因为 URL 没有路径。
这实际上在 aux2 中呈现了 Test3，但有一个问题：页面加载后 URL 更改为 localhost:3000/shell/(/(department/1//aux2:test3))，然后整个事情再次出现“无法匹配任何路由：'shell'”在页面刷新时。
试试localhost:3000/shell/(department/1//aux2:test3) 或localhost:3000/shell/(department;id=1//aux2:test3)。您可能需要从路由定义中删除 Id 以便以后工作
localhost:3000/shell/(department/1//aux2:test3) 工作，另一个坏了。你应该把它作为一个实际的答案，我会对为什么 URL 必须采用这种形式非常感兴趣。

标签： angular angular2-routing

【解决方案1】：

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

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

辅助插座和主插座在同一个父插座上被视为同级

【讨论】：

routerLink="/shell(department/1//aux2:test3)" 似乎不起作用，但 router.navigateByUrl( "/shell(department/1//aux2:test3)" ); 工作正常。
是的。 routerLink 导航到辅助路由似乎存在一些问题。不确定是否记录了错误。将检查和更新

【解决方案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>
  `
})

【讨论】：