CODEWITHSUNDEEP
angularangular-routerlink
Stanislav Dontsov
Stanislav Dontsov

Reputation: 1741

Angular 5+ routerLinkActive doesn't work with repeated parameters

In my little example here everything works fine with the following paths:

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

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

but if I use repeated query parameters to pass an array of values routerLinkActive brakes:

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

Is it a bug? How can I bypass it? Tested it in Angular 5/6.

Update: I updated my example a bit to show why I want to pass an array of parameters exactly this way (not passing it as one parameter with multiple values) and how I use it.

Update2: After deletion of [queryParamsHandling]="'preserve'" it starts working, so the question can be narrowed to: Why routerLinkActive doesn't work with repeated parameters when queryParamsHandling="preserve".

Upvotes: 0

Views: 475

Answers (1)

Maksym Shevchenko
Maksym Shevchenko

Reputation: 746

To pass an array to query params you probably have to use , ,so the link should look like this:

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

route snapshot (ActivatedRoute.snapshot) will look like this: 

{
  ...
  queryParams: {
    param1: "1,2"
  },
  ...
}

UPDATE:

Alright, misunderstood the question. So if you change your app.component.html to the following code - it will work: 

<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 navigate to path1?param1=1&param1=3 and it will display the values and highlight the active url

Upvotes: 1

Related Questions