Question

在我的小示例here中，使用以下路径可以正常工作：

https://angular-d7eqku.stackblitz.io/path1

https://angular-d7eqku.stackblitz.io/path1?param1=1

但是如果我使用重复的查询参数来传递值数组routerLinkActive刹车：

https://angular-d7eqku.stackblitz.io/path1?param1=1&param1=2

是错误吗？我该如何绕过？ 在Angular 5/6中进行了测试。

更新：我对示例进行了一些更新，以说明为什么要完全以这种方式传递参数数组（而不是将其作为具有多个值的一个参数传递）以及如何使用它。

Update2： 删除[queryParamsHandling] =“'preserve'”后，它开始工作，因此可以将问题缩小为： 为什么当queryParamsHandling =“ preserve”时routerLinkActive无法使用重复的参数。

Answer 1

要传递数组以查询参数，您可能必须使用,，因此链接应如下所示：

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>

Here is repro导航至path1?param1=1&param1=3，它将显示值并突出显示活动的URL

Angular 5+ routerLinkActive不适用于重复的参数

1 个答案: