Cómo pasar parámetros de consulta con un routerLink

161

Quiero pasar un parámetro de consulta prop=xxx.

Esto no funciono

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

angular angular2-routing

— Günter Zöchbauer
fuente

La sintaxis que desea usar es para los parámetros de la matriz y este es el formulario <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, esto le da una matriz de parámetros de URL (punto y coma; en lugar de? Y & separadores) y puede acceder a esto mediante ActivatedRoute.params en su lugar activadoRoute.queryParams Más información aquí stackoverflow.com/questions/35688084/… y aquí stackoverflow.com/questions/2048121/…

— William Ardila

Los parámetros de consulta y los parámetros de la matriz son iguales. La única diferencia es que cuando se agregan al segmento raíz, se serializan como parámetros de consulta, cuando se agregan a un segmento secundario, se serializan como parámetros de matriz.

— Günter Zöchbauer

Tenga algunas diferencias más, consulte este web.archive.org/web/20130126100355/http://brettdargan.com/blog/… También puede verificar la sintaxis del parámetro de enlace en el documento angular aquí angular.io/docs/ts/latest/ guía / ...

— William Ardila

325

queryParams

queryParamses otra entrada de routerLinkdonde se pueden pasar como

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

fragment

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

routerLinkActiveOptions

Para obtener también rutas activas, clase activa establecida en rutas principales:

[routerLinkActiveOptions]="{ exact: false }"

Para pasar parámetros de consulta para this.router.navigate(...)usar

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

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

Ver también https://angular.io/guide/router#query-parameters-and-fragments

— Günter Zöchbauer
fuente

¿Cómo funcionaría esto programáticamente? Lo intenté con this.router.navigate (['/ resetPassword', {queryParams: {username: loginName}}]); Pero el resultado fue: localhost: 8100 / resetPassword; queryParams =% 5Bobject% 20Object% 5D

— rickul

Actualicé mi respuesta. Vea también el enlace que agregué. Muestra un ejemplo completo.

— Günter Zöchbauer

Notas de pareja: el código de rickul debe estar [ '/resetPassword' ], { queryParams: { username: loginName }})donde ]viene antes que los extras. Además, no olvide que los parámetros de consulta distinguen entre mayúsculas y minúsculas.

— Simon_Weaver

No te olvides de suscribirte a queryParams en el destino: stackoverflow.com/a/39146396/2726844

— Vince I

O si está utilizando rutas, runGuardsAndResolvers: 'always'volverá a cargar la ruta medium.com/engineering-on-the-incline/…

— Adam