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

Question

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

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

我按照此链接中的示例创建了路由和路由器链接，只要路由器链接在应用程序组件内，一切都可以正常工作。但是，我创建了一个主布局组件，里面有一个菜单，以便我可以在所有页面上重用它，并使用 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 也不会因为尾部斜杠。

有人能帮我吗？

Answer 1

我发现了这个问题，它描述了完全相同的行为。显然，它已经引起了开发人员的注意，他们认为这是正确的行为。相同的路由器链接表达式可以根据其使用位置产生不同的结果。

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

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

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

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

在这里描述的情况下，绝对链接起作用并给出了正确的链接。

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