Angulaire 4 - Route de requête params provoquer chemin correspondent à l'échec

Après une recherche de plusieurs threads/questions sur les différents types de routage dans Angulaire 4, je ne peux pas résoudre un problème lié au passage de queryParams à un Angulaire de la 4 voie.

Lors du passage dans l'url

http://localhost/search;x=y

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

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

ou dans la classe du composant

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

le résultat est le routeur jetant un match d'erreur:

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

Lors de la configuration de enableTracing de vrai, je peux voir le code de navigation le suspect personnages, ce qui est probablement la raison pour laquelle il ne se correspondent.

J'ai une obligation de gérer les url qui contiennent queryParams et les analyser pour les appels api, de sorte que la requête param route doit être utilisé au cours obligatoire ou facultatif params.

Quelqu'un a eu un problème similaire et si oui, est l'encodage de la racine (ahem.) cause du problème?

Pourriez-vous nous montrer le chemin de votre itinéraire dans la définition ? Il devrait être { path: 'search/:x', component: MyComponent}. Si non, voici votre erreur !
Pas tout à fait. QueryParams devrait pas être défini dans la définition de la route. Si ils sont ... puis que est le problème. 🙂

OriginalL'auteur soulofahero | 2017-09-01

  1. 15

    Les paramètres de la requête suite à une url qui ressemble à ceci: 

    http://localhost/search?x=y

    Avec un point d'interrogation, et non un point-virgule.

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

    Angulaire 4 - Route de requête params provoquer chemin correspondent à l'échec

    Remarque qu'ils sont pas configuré dans le cadre de la définition de la route.

    Votre routerLink et naviguer méthode semble correct.

    Votre routeur.appel de naviguer a le crochet de fermeture au mauvais endroit, doit être ['/products'], {, etc... }.
    Vous êtes de droite. J'avais résolu dans ce post: stackoverflow.com/questions/44864303/... Mais raté celui-ci.

    OriginalL'auteur DeborahK

  2. 11

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

    J'ai été en utilisant ActivatedRouteSnapshot pour stocker l'url (y compris requête params) comme un tout, puis passer que par le routeur.

    Je devrais avoir stocké la requête params dans un objet séparé de la route et les a transmises à l'aide de

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

    Bien sûr, la correspondance de route a échoué car il ne pouvait pas répondre à une voie avec la requête params ajouté à la fin de la chaîne.

    OriginalL'auteur soulofahero

  3. 1

    Code suivant m'a sauvé:

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

    Sur la fin de réception aller chercher la valeur par: ( je suppose ActivatedRoute est injecté place),

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

    Ou au niveau du gabarit, vous pouvez écrire comme cela.

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

    Remarque: la route est une instance de ActivatedRoute.

    OriginalL'auteur Dila Gurung