Come passare i parametri della query con un routerLink

161

Voglio passare un parametro di query prop=xxx.

Questo non ha funzionato

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

angular angular2-routing

— Günter Zöchbauer
fonte

La sintassi che vuoi usare è per i parametri della matrice e questo è il modulo <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, questo ti dà una matrice parametri url (punto e virgola; invece di? E & separatori) e puoi accedervi da ActivatedRoute.params invece ActivatedRoute.queryParams Maggiori informazioni qui stackoverflow.com/questions/35688084/… e qui stackoverflow.com/questions/2048121/…

— William Ardila,

I parametri della query e i parametri della matrice sono gli stessi. L'unica differenza è quando vengono aggiunti al segmento radice, vengono serializzati come parametri di query, quando vengono aggiunti a un segmento figlio, vengono serializzati come parametri di matrice.

— Günter Zöchbauer,

Altre differenze controlla questo web.archive.org/web/20130126100355/http://brettdargan.com/blog/… Inoltre puoi controllare la sintassi del parametro link nel documento angolare qui angular.io/docs/ts/latest/ guida / ...

— William Ardila,

327

queryParams

queryParamsè un altro input di routerLinkdove possono essere passati come

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

fragment

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

routerLinkActiveOptions

Per ottenere le rotte attive impostate su rotte padre:

[routerLinkActiveOptions]="{ exact: false }"

Per passare i parametri di query da this.router.navigate(...)utilizzare

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

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

Vedi anche https://angular.io/guide/router#query-parameters-and-fragments

— Günter Zöchbauer
fonte

Come funzionerebbe a livello di programmazione? Ho provato con this.router.navigate (['/ resetPassword', {queryParams: {username: loginName}}]); Ma il risultato è stato: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D

— rickul

Ho aggiornato la mia risposta. Vedi anche il link che ho aggiunto. Mostra un esempio completo.

— Günter Zöchbauer,

Note di coppia: il codice di rickul dovrebbe essere [ '/resetPassword' ], { queryParams: { username: loginName }})il punto ]prima degli extra. Inoltre, non dimenticare che i parametri della query fanno distinzione tra maiuscole e minuscole.

— Simon_Weaver

Non dimenticare di iscriverti alla queryParams sulla destinazione: stackoverflow.com/a/39146396/2726844

— Vince I

Oppure, se stai utilizzando percorsi, runGuardsAndResolvers: 'always'ricaricherai il percorso medium.com/engineering-on-the-incline/…

— Adam