Angular 2 为带有多个路由器出口的 URL 添加了斜杠答案

【问题标题】：Angular 2 Adds Trailing Slash To URL With Multiple Router OutletsAngular 2 为带有多个路由器出口的 URL 添加了斜杠
【发布时间】：2017-07-04 11:37:54
【问题描述】：

我有一个有两个出口的应用组件：

template: '<router-outlet></router-outlet><router-outlet name="popup"></router-outlet>'

我按照this link 中的示例创建路由和routerLinks，只要routerLinks 在应用程序组件内，一切正常。不过，我创建了一个主布局组件，里面有一个菜单，这样我就可以在所有页面上重用它，并使用 loadChildren 来加载里面的相应模块和组件。

<app-main-menu></app-main-menu>
<h1>
  {{title}}
</h1>
<div class="container">
  <router-outlet></router-outlet>
</div>

问题是，当我将弹出式插座的 routerLinks 移动到菜单中时，它包含主路由的尾部斜杠，并且生成的 url 不起作用。所以例如这个routerLink：

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a>

创建 url 'localhost/mainroute(popup:login)' 如果它被放置在应用程序组件和 'localhost/mainroute/(popup:login)'如果放在菜单组件中。

虽然第一个 url 有效，但第二个 url 会产生错误： 错误：无法匹配任何路由：'mainroute'

我不明白为什么它会以不同的方式处理这两种情况。我也不明白，即使 url 'localhost/mainroute/' 有效，第二个生成的 url 也不会因为尾部斜杠。

有人可以帮我吗？

【问题讨论】：

我暂时找到了解决方法。我创建了一个函数和一个指向它的链接。链接如下所示： Login 并且该函数使用在结构中导入的路由器，如下所示获取不带斜杠的 url： public openLogin(): void { this.router.navigateByUrl(this.router.url + '(popup:login)'); }

标签： angular routes trailing-slash routerlink router-outlet

【解决方案1】：

我发现了这个issue，它描述了完全相同的行为。显然，它已引起开发人员的注意，他们认为这是正确的行为。相同的路由器链接表达式可能会产生不同的结果，具体取决于它的使用位置。

建议的解决方案是使用这样的相对链接：

<a [routerLink]="['../', { outlets: { popup: 'login' } }]">

或者使用这样的绝对链接：

<a [routerLink]="['/', { outlets: { popup: 'login' } }]">

在此处描述的情况下，绝对链接有效并提供了正确的链接。

我仍然不明白这种行为。因此，如果有人对此有很好的解释，请详细说明。

【讨论】：