如何在url路径中没有额外的斜杠的情况下实现angular2嵌套组件路由

Question

我正在使用angular2构建单页面应用程序,它需要根据应用程序的路由呈现不同的应用程序模板.在最高级别,它应该能够在主应用程序模板和应用程序的管理模板之间切换.

路由规则:

• 如果url路径以/ auth开头,那么它由AuthApp处理
• 如果它以其他任何东西开头,则应由MainApp处理

执行:

为了实现这一点,我有一个最高级别的组件应用程序,它将责任委托给AuthApp或MainApp,就像这样.

@RouteConfig([
  {
    path: '/auth/...',
    component: AuthApp,
    as: 'Auth'
  },
  {
    path: '/...',
    component: MainApp,
    as: 'Main'
  }
])

然后每个子应用程序(例如AuthApp,MainApp)都有自己的路由定义,例如这个.

@RouteConfig([
  { path: '/current-vacancies', CurrentVacancies, as: 'CurrentVacancies', useAsDefault: true },
  { path: '/candidates/create', CandidateCreate, as: 'CandidateCreate'},
  ...
])

功能上,从设计的角度来看,这非常有用!

问题:

在主应用程序中,应用程序的路由配置未指定路径(例如/...=> MainApp),我不想要嵌套的URL路径.例如,如果您通过应用程序(routerLink)导航到CurrentVacancies,它会更新网址并预先添加额外的不需要的正斜杠..../#//current-vacancies当我希望它读取时,url路径现在看起来像这样.../#/current-vacancies.

当您.../#/current-vacancies在地址栏中键入时,应用程序路由实际工作正常,它会正确转换.然而,通过应用程序routerLink指令进行导航会预先添加不需要的正斜杠.

我从逻辑上理解为什么会发生这种情况,委托给MainApp的根组件有一个'/'路径,它与它的子组件连接在一起形成一个完整的url路径.但在这种情况下,不希望有额外的斜线.任何想法我如何删除它,或以某种方式覆盖此行为.

顺便说一下,我考虑过将MainApp组件路由移到最顶层,虽然这确实解决了我报告的url路径问题,但它不允许我在顶层切换模板.

综上所述

请帮帮我

• 如何删除/主应用程序路由上不需要的内容"preferred option",或
• 设计应用程序如何使用嵌套组件路由获得可切换的顶级模板.

谢谢

Answer 1

今天（Angular 4）可以正常工作，并且似乎在 Angular 2 Final 发布之前就已修复。