小编Mar*_*tor的帖子

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

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 也不会因为尾部斜杠。

有人能帮我吗？