Angular 2使用多个路由器插座向URL添加尾随斜杠

发布时间：2020-12-17 17:09:07 所属栏目：安全来源：网络整理

导读：我有一个应用程序组件,有两个出口：模板：’ router-outlet / router-outlet router-outlet name =“popup” / router-outlet‘ 我按照this link中的示例创建路由和routerLinks,只要routerLinks在app组件内部,一切正常.但是,我创建了一个带有菜单的主要布局

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

模板：’< router-outlet>< / router-outlet>< router-outlet name =“popup”>< / router-outlet>‘

我按照this link中的示例创建路由和routerLinks,只要routerLinks在app组件内部,一切正常.但是,我创建了一个带有菜单的主要布局组件,以便我可以在所有页面上重复使用它,并使用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)'(如果它放在app组件中)和’localhost / mainroute /(popup：login)'(如果它放在菜单组件中).

当第一个网址有效时,第二个网址会产生错误：
错误：无法匹配任何路线：’mainroute’

我不明白为什么它以不同的方式处理这两种情况.我也不明白,即使url’localhost / mainroute /’工作,第二个生成的url也不会因为斜杠.

有人能帮我吗？

解决方法

我找到了这个 issue,它描述了完全相同的行为.显然它已被提到开发人员的注意力,他们认为这是正确的行为.相同的路由器链接表达式可能会产生不同的结果,具体取决于它的使用位置.

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

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

或使用这样的绝对链接：

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

在这里描述的情况下,绝对链接工作并给出了正确的链接.

我仍然不明白这种行为.所以,如果有人有一个很好的解释,请详细说明.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!