Comment passer des paramètres de requête avec un routerLink

161

Je souhaite transmettre un paramètre de requête prop=xxx.

Cela n'a pas fonctionné

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]>Somewhere</a>
angular angular2-routing Günter Zöchbauer
la source
La syntaxe que vous souhaitez utiliser est pour les paramètres de matrice et c'est le formulaire <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, cela vous donne une matrice de paramètres d'url (point-virgule; au lieu de? Et & séparateurs) et vous pouvez y accéder par ActivatedRoute.params au lieu de enabledRoute.queryParams Plus d'informations ici stackoverflow.com/questions/35688084/… et ici stackoverflow.com/questions/2048121/…
William Ardila
1
Les paramètres de requête et les paramètres de matrice sont les mêmes. La seule différence est que lorsqu'ils sont ajoutés au segment racine, ils sont sérialisés en tant que paramètres de requête, lorsqu'ils sont ajoutés à un segment enfant, ils sont sérialisés en tant que paramètres de matrice.
Günter Zöchbauer
Ayez quelques autres différences, vérifiez ce web.archive.org/web/20130126100355/http://brettdargan.com/blog/... Vous pouvez également vérifier la syntaxe du paramètre de lien dans la documentation angulaire ici angular.io/docs/ts/latest/ guide /…
William Ardila

Réponses:

327

queryParams

queryParamsest une autre entrée d' routerLinkoù ils peuvent être passés comme

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}">Somewhere</a>

fragment

<a [routerLink]="['../']" [queryParams]="{prop: 'xxx'}" [fragment]="yyy">Somewhere</a>

routerLinkActiveOptions

Pour obtenir également les itinéraires de classe active définis sur les itinéraires parents:

[routerLinkActiveOptions]="{ exact: false }"

Pour transmettre les paramètres de requête à this.router.navigate(...)utiliser

let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

Voir aussi https://angular.io/guide/router#query-parameters-and-fragments

Günter Zöchbauer
la source
Comment cela fonctionnerait-il par programme? J'ai essayé avec this.router.navigate (['/ resetPassword', {queryParams: {username: loginName}}]); Mais le résultat était: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D
rickul
2
J'ai mis à jour ma réponse. Voir aussi le lien que j'ai ajouté. Il montre un exemple complet.
Günter Zöchbauer
Quelques notes: le code de Rickul devrait être [ '/resetPassword' ], { queryParams: { username: loginName }})là où le ]vient avant les extras. N'oubliez pas non plus que les paramètres de requête sont sensibles à la casse.
Simon_Weaver
2
N'oubliez pas de vous abonner aux queryParams sur la cible: stackoverflow.com/a/39146396/2726844
Vince I
1
Ou si vous utilisez des itinéraires, runGuardsAndResolvers: 'always'rechargera l'itinéraire medium.com/engineering-on-the-incline
Adam