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
1
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

Respuestas:

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
2
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
2
No te olvides de suscribirte a queryParams en el destino: stackoverflow.com/a/39146396/2726844
Vince I
1
O si está utilizando rutas, runGuardsAndResolvers: 'always'volverá a cargar la ruta medium.com/engineering-on-the-incline/…
Adam