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

Question

在我的小例子中，以下路径一切正常：

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

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

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

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

这是一个错误吗？我怎样才能绕过它？ 在 Angular 5/6 中对其进行了测试。

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

更新 2 ： 删除 [queryParamsHandling]="'preserve'" 后，它开始工作，所以问题可以缩小到： 为什么 routerLinkActive 在 queryParamsHandling="preserve" 时不能使用重复参数。

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>

这是复制 导航到path1?param1=1&param1=3，它将显示值并突出显示活动 url