Angular 角度5+;RouterLink活动不';不能重复使用参数
在我的小示例中,通过以下路径,一切都可以正常工作: 但是,如果我使用重复的查询参数传递一个值数组RouterLink Active brakes: 是虫子吗?我怎样才能绕过它? 以5/6的角度对其进行测试。 更新: 我对我的示例进行了一些更新,以说明为什么我希望以这种方式传递一个参数数组(而不是将其作为一个具有多个值的参数传递),以及如何使用它 更新2: 删除[queryParamsHandling]=“'preserve'”后,它开始工作,因此问题可以缩小到:Angular 角度5+;RouterLink活动不';不能重复使用参数,angular,angular-routerlink,Angular,Angular Routerlink,在我的小示例中,通过以下路径,一切都可以正常工作: 但是,如果我使用重复的查询参数传递一个值数组RouterLink Active brakes: 是虫子吗?我怎样才能绕过它? 以5/6的角度对其进行测试。 更新: 我对我的示例进行了一些更新,以说明为什么我希望以这种方式传递一个参数数组(而不是将其作为一个具有多个值的参数传递),以及如何使用它 更新2: 删除[queryParamsHandling]=“'preserve'”后,它开始工作,因此问题可以缩小到: 为什么queryParam
为什么queryParamsHandling=“preserve”时RouterLink Active不能处理重复参数。要将数组传递给查询参数,您可能必须使用
,
,因此链接应如下所示:
{
...
queryParams: {
param1: "1,2"
},
...
}
https://angular-d7eqku.stackblitz.io/path1?param1=1,2
路由快照(ActivatedRoute.snapshot)将如下所示:
{
...
queryParams: {
param1: "1,2"
},
...
}
更新:
好吧,我误解了这个问题。因此,如果您将app.component.html更改为以下代码,它将起作用:
<ul>
<li><a routerLink="path1" routerLinkActive="active">Item1</a></li>
<li><a routerLink="path2" routerLinkActive="active">Item1</a></li>
<li><a routerLink="path3" routerLinkActive="active">Item1</a></li>
<router-outlet></router-outlet>
</ul>
- 导航到
path1?param1=1¶m1=3
,它将显示值并突出显示活动url我想使用一种标准方式,因为angular()支持它,而无需映射,可以从字符串中数组。@StanisalvDontsov ParamMap仅用于url参数,即当您将路线声明为home/:my param/:id
;以下是关于查询参数的文档ActivatedRoute中有ParamMap类型的queryParamMap。您可以在我的示例中看到它是如何工作的。@StanisalvDontsov在查询参数中使用coma(,
)有什么问题,然后简单地从该字符串生成一个数组?如果您尝试我的示例,您将看到它不工作。