5

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

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

我按照此链接中的示例创建路由和 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 也不会因为尾部斜杠。

有人能帮我吗？

4

1 回答 1

3

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

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

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

或使用这样的绝对链接：

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

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

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

于 2017-02-16T16:27:37.267 回答