加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular – 辅助路由仅适用于根组件吗?

发布时间:2020-12-17 10:21:18 所属栏目:安全 来源:网络整理
导读:我在子组件中设置辅助路由时遇到问题,由于某种原因,只有那些辅助路由才能从根组件开始工作. 这是我的路由器设置 export const routes: RouterConfig = [ { path: 'test1',component: Test1Component },{ path: 'test2',component: Test2Component,outlet: 'a
我在子组件中设置辅助路由时遇到问题,由于某种原因,只有那些辅助路由才能从根组件开始工作.

这是我的路由器设置

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中:

主要插座显示为蓝色,辅助插座为红色.

但是,如果我尝试导航到

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

我收到一条错误消息:

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

路由器插座如下:

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-browser.umd.js:1900 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ‘shell’

编辑2:这是link to the project on github.

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

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读