Angular 4 - параметры запроса маршрута вызывают сбой сопоставления пути

После поиска нескольких потоков / вопросов по различным типам маршрутизации в Angular 4 я не могу решить проблему, связанную с передачей queryParams на маршрут Angular 4.

При переходе в URL

http://localhost/search;x=y

через шаблон [queryParams] = {x: 'y'}

<a [routerLink]="/search" [queryParams]="{x: 'y'}">Navigate</a>

или в классе компонентов

this._router.navigate(['/search'], { queryParams: {x: 'y'} });

в результате маршрутизатор выдает ошибку соответствия:

Error: Cannot match any routes. URL Segment: 'search%3Fparam1%3Dtest1%26param2%3Dtest2'

Когда для параметра enableTracing установлено значение true, я вижу, что навигация кодирует подозрительные символы, что, скорее всего, является причиной несоответствия.

У меня есть требование обрабатывать URL-адреса, содержащие queryParams, и анализировать их для вызовов API, поэтому маршрут параметра запроса должен использоваться поверх обязательных или дополнительных параметров.

У кого-нибудь была подобная проблема, и если да, то является ли кодировка основной (кхм) причиной проблемы?


angular query-parameters angular2-routing url-encoding
person soulofahero    schedule 01.09.2017    source источник
comment
Не могли бы вы показать нам путь вашего маршрута в определении? Это должно быть { path: 'search/:x', component: MyComponent}. Если нет, то вот ваша ошибка!   -  person    schedule 01.09.2017
comment
Не совсем. QueryParams не должен быть определен в определении маршрута. Если они ... тогда проблема в этом. :-)   -  person DeborahK    schedule 02.09.2017

Ответы (4)


arrow_upward
23
arrow_downward

Параметры запроса приводят к URL-адресу, который выглядит следующим образом:

http://localhost/search?x=y

Знак вопроса, а не точка с запятой.

Вот краткое описание того, как работать с параметрами запроса.

введите описание изображения здесь

Обратите внимание, что они не настроены как часть определения маршрута.

Ваш метод routerLink и навигации выглядит правильно.

Обновление:
обязательно используйте этот импорт.

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}
person DeborahK    schedule 01.09.2017
comment
В вашем вызове router.navigate закрывающая квадратная скобка находится не в том месте, это должно быть ['/ products'], {etc ...}. - person Matt; 03.01.2018
comment
Ты прав. Я исправил это в этом сообщении: stackoverflow.com/questions/44864303/ Но пропустил этот. - person DeborahK; 04.01.2018

arrow_upward
12
arrow_downward

После некоторых размышлений я смог исправить проблему.

Я использовал ActivatedRouteSnapshot для хранения URL-адреса (включая параметры запроса) в целом, а затем передавал его маршрутизатору.

Я должен был сохранить параметры запроса в отдельном объекте маршрута и передать их с помощью

this._router.navigate(['/search'], { queryParams: paramsObj });

Конечно, сопоставление маршрута не удалось, поскольку оно не могло сопоставить маршрут со всеми параметрами запроса, добавленными в конец строки.

person soulofahero    schedule 05.10.2017

arrow_upward
3
arrow_downward

Например, вы хотите добавить ссылку, которая будет перенаправлять на страницу поиска с переменной: searchString = 'search'

<a [routerLink]="['/search', searchString]">Navigate</a>

В вашем компоненте вы можете создать навигацию с помощью this._router.navigate(['/search', this.searchString]);, где searchString объявлена ​​как константа в обоих случаях.

person Mark Oghifo    schedule 14.12.2017

arrow_upward
2
arrow_downward

Следующий код спас меня:

         this.router.navigate(['route-name'], { queryParams: {key:'value'} });

На принимающей стороне выберите значение: (я предполагаю, что ActivatedRoute вводится в место),

         this.route.queryParams.subscribe(params => {console.log(queryParams['key'])}

Или на уровне шаблона вы можете написать вот так.

 **<a [routerLink]="['/login']" [queryParams]="{ key: 'employer'}" >sign in</a></p>**

Примечание. Route - это экземпляр ActivatedRoute.

person Dila Gurung    schedule 28.12.2018