角2增加了尾部斜杠URL以多路由器奥特莱斯

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>

创建链接'本地主机/ mainroute（弹出：登录）'如果它被放置在该应用部件和'本地主机/ mainroute /（弹出：登录）'如果它被放置在菜单组件中。

虽然第一URL的工作，第二个URL产生一个错误： 错误：无法匹配任何路线：“mainroute”

我不明白为什么它把两种情况是不同的。我也不明白，即使网址'localhost/mainroute /'有效，第二个生成的网址并不是因为结尾的斜杠。

有人可以帮助我吗？

来源

2017-02-15 Martinator

我发现暂时的解决方法。我创建了一个函数和一个指向它的链接。链接看起来像这样：** Login **并且该函数使用一个像这样的结构导入的路由器来获取没有结尾斜杠的url：** public openLogin（）：void { this.router.navigateByUrl（this.router .url +'（popup：login）'）; } ** – Martinator

我找到了这个issue，它描述了完全相同的行为。显然它已经引起了开发者的注意，他们认为这是正确的行为。相同的路由器链接表达式可以根据使用的地方产生不同的结果。

所提出的解决方案是使用这样一个相对链接：

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

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

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

在这种情况下在这里描述的绝对链路工作和给了正确的链接。

我还是不明白这个行为。所以如果任何人有一个很好的解释，请详细说明。

来源

2017-02-16 16:27:37 Martinator

角2增加了尾部斜杠URL以多路由器奥特莱斯

回答

相关问题