Angular 2将尾部斜杠添加到具有多个路由器出口的URL

我有一个应用程序组件，它有两个出口：

模板：'

我按照中的示例创建路由和RouterLink，只要RouterLink在应用程序组件中，一切都可以正常工作。但是，我已经创建了一个主布局组件，其中包含一个菜单，这样我就可以在所有页面上重用它，并使用loadChildren加载其中相应的模块和组件

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

{{title}}

问题是，当我将弹出式出口的RouterLink移动到菜单中时，它包含主路由的尾随斜杠，结果url不起作用。例如，这个routerLink：

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

登录

创建url“localhost/mainroute（popup:login）”（如果放置在应用程序组件中）和“localhost/mainroute/（popup:login）”（如果放置在菜单组件中）

第一个url工作时，第二个url会产生错误： 错误：无法匹配任何路由：“主路由”

我不明白为什么它对这两个病例的处理方式不同。我也不明白，即使url“localhost/mainroute/”起作用，第二个生成的url也不会起作用，因为后面的斜杠

有人能帮我吗？

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

建议的解决方案是使用如下相对链接：

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

或者使用如下绝对链接：

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

在这里描述的案例中，绝对链接起作用，并给出了正确的链接

---

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

我暂时找到了一个解决办法。我创建了一个函数和指向它的链接。该链接如下所示：Login，该函数使用在类似于这样的构造中导入的路由器来获取一个不带尾随斜杠的url:public openLogin（）：void{this.router.navigateByUrl（this.router.url+'（弹出：Login）；}