如何在 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) 导航到 CurrentVacancys，它会更新 url 并在前面添加一个多余的正斜杠。当我希望它读取 .../#/current-vacancies 时，url 路径现在看起来像这样 .../#//current-vacancies。

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

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

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

总结

请帮帮我

• 如何删除主应用路由 "preferred option" 上不需要的 /，或者
• 如何设计应用以具有可切换的顶级模板和嵌套组件路由。

谢谢

Answer 1

这在今天有效（Angular 4），似乎在 Angular 2 final 发布之前已经修复。