Angular 5+ routerLinkActive не работает с повторяющимися параметрами

В моем небольшом примере здесь все работает нормально со следующими путями:

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.

Обновление: я немного обновил свой пример, чтобы показать, почему я хочу передавать массив параметров именно таким образом (а не как один параметр с несколькими значениями) и как я его использую.

Update2: после удаления [queryParamsHandling]='preserve' он начинает работать, поэтому вопрос можно сузить до: Почему routerLinkActive не работает с повторяющимися параметрами, когда queryParamsHandling=preserve.


angular angular-routerlink
person Stanisalv Dontsov    schedule 20.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы передать массив в параметры запроса, вам, вероятно, придется использовать , , поэтому ссылка должна выглядеть так:

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

person Maksym Shevchenko    schedule 20.09.2018
comment
Я бы хотел использовать стандартный способ, так как он поддерживается angular (angular.io/api/ router/ParamMap#getall) без сопоставления может помещаться в/из строки. - person Stanisalv Dontsov; 20.09.2018
comment
@StanisalvDontsov ParamMap предназначен только для параметров URL-адреса, т.е. когда вы объявили свой маршрут как home/:my-param/:id; вот документы о параметрах запроса angular.io/guide/router#query-parameters- и-фрагменты - person Maksym Shevchenko; 20.09.2018
comment
В ActivatedRoute есть queryParamMap типа ParamMap. Вы можете увидеть, как это работает на моем примере. - person Stanisalv Dontsov; 20.09.2018
comment
@StanisalvDontsov, в чем проблема с использованием запятой (,) в параметрах вашего запроса, а затем просто создать массив из этой строки? - person Maksym Shevchenko; 20.09.2018
comment
Если вы попробуете angular-d7eqku.stackblitz.io/path1?param1=1,2 на моем примере вы увидите, что это не работает. - person Stanisalv Dontsov; 20.09.2018
comment
да, потому что вам не нужно присоединяться к этим строкам, вот рабочий stakblitz stackblitz.com/edit/angular-zviy3y?file=src/app/ - person Maksym Shevchenko; 20.09.2018
comment
ладно, начнем с самого начала :) Ваш пример работает только потому, что это один параметр. Мой вопрос не о том, как я могу сделать его одним параметром, а о том, почему он не работает с повторяющимися параметрами, хотя я вижу, что в других частях Angular повторяющиеся параметры поддерживаются дизайном. - person Stanisalv Dontsov; 20.09.2018
comment
так что вы просто удалили [queryParamsHandling]="'preserve'"? - person Stanisalv Dontsov; 20.09.2018
comment
Правильно, похоже, что эта директива конфликтует с routerLinkActive - person Maksym Shevchenko; 20.09.2018