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

问题描述

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

这是我的路由器设置

导出常量路由:RouterConfig = [{ 路径:'test1'，组件:Test1Component }，{ 路径:'test2'，组件:Test2Component，插座:'aux'}，{ 路径:'shell'，组件:ShellComponent，子组件:[{ path: 'department/:id', 组件: DepartmentDetailComponent },{ 路径:'test3'，组件:Test3Component，出口:'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 例外:错误:未捕获(承诺):错误:无法匹配任何路由:'test3'

router-outlets如下:

app.component.ts(辅助:test2)

<h1>应用</h1><div class="primary-outlet"><路由器插座></路由器插座>
<div class="aux-outlet"><router-outlet name="aux"></router-outlet>

shell.component.ts (aux2: test3)

<h1>壳</h1><div class="primary-outlet"><路由器插座></路由器插座>
<div class="aux-outlet"><router-outlet name="aux2"></router-outlet>

我错过了什么?

按照 Arpit Agarwal 的建议，导航到

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

成功了:

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

<块引用>

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

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

解决方案

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

URL 具有格式 (primaryroute//secondaryroute)括号告诉它可能有兄弟路由，// 是兄弟路由分隔符.

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

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.

Here's my router setup

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' }         ] }
];

If I navigate to

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

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)

I get an error message:

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

router-outlets are as follows:

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>

What am I missing?

EDIT: As suggested by Arpit Agarwal, navigating to

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

does the trick:

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

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

EDIT 2: Here's the link to the project on github.

解决方案

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

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屋！