web-dev-qa-db-fra.com

Angular 4 - Les paramètres de requête d'itinéraire provoquent l'échec de la correspondance de chemin

Après avoir recherché plusieurs fils/questions sur les différents types de routage dans Angular 4, je ne peux pas résoudre un problème lié au passage de queryParams à un Angular 4 route.

En passant soit dans l'url

http://localhost/search;x=y

via le modèle [queryParams] = {x: 'y'}

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

ou dans la classe de composants

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

le résultat est que le routeur lance une erreur de correspondance:

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

Lors de la définition de enableTracing sur true, je peux voir que la navigation code les caractères suspects, ce qui est probablement la raison pour laquelle elle ne correspond pas.

J'ai une obligation de gérer les URL qui contiennent queryParams et de les analyser pour les appels api, donc la route des paramètres de requête doit être utilisée sur les paramètres obligatoires ou facultatifs.

Quelqu'un at-il eu un problème similaire et si c'est le cas, l'encodage est-il la cause racine (ahem.) Du problème?

angularangular2-routingurl-encodingquery-parameters
10
soulofahero

Les paramètres de requête génèrent une URL qui ressemble à ceci:

http://localhost/search?x=y

Avec un point d'interrogation, pas un point-virgule.

Voici un résumé de la façon de travailler avec les paramètres de requête.

enter image description here

Notez qu'ils ne sont pas configurés dans le cadre de la définition de l'itinéraire.

Votre méthode routerLink et de navigation semble correcte.

Mise à jour:
assurez-vous d'utiliser cette importation.

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {}
18
DeborahK

Après quelques délibérations, j'ai pu résoudre le problème.

J'utilisais ActivatedRouteSnapshot pour stocker l'URL (y compris les paramètres de requête) dans son ensemble, puis je la transmettais au routeur.

J'aurais dû stocker les paramètres de requête dans un objet distinct de l'itinéraire et les transmettre en utilisant

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

Bien sûr, la correspondance de route a échoué car elle ne pouvait pas correspondre à une route avec tous les paramètres de requête ajoutés à la fin de la chaîne.

11
soulofahero

Le code suivant m'a sauvé:

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

À la réception, récupérez la valeur en: (je suppose qu'ActivatedRoute est injecté),

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

Ou au niveau du modèle, vous pouvez écrire comme ceci.

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

Remarque: route est une instance d'ActivatedRoute.

2
Dila Gurung

Par exemple, vous souhaitez ajouter un lien qui redirigera vers la page de recherche avec la variable: searchString = 'search'

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

Dans votre composant, vous pouvez créer une navigation à l'aide de this._router.navigate(['/search', this.searchString]);, où searchString est déclaré comme un const dans les deux cas.

2
Mark Oghifo