如何在 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，它会更新 url 并在前面添加一个额外的不需要的正斜杠。 url 路径现在读起来像这样 .../#//current-vacancies 当我想让它读 .../#/current-vacancies.

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

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

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

总结

请帮助我，要么

如何删除主要应用程序路线 "preferred option" 或

/

如何设计应用程序以具有可切换的顶级模板和嵌套组件路由。

谢谢

Answer 1

这在今天 (Angular 4) 有效并且似乎在 Angular 2 final 发布之前已经修复。

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

How to achieve angular2 nested component routing without the additional slash in url path

angular

angular2-routing