How to pass query parameters with a routerLink

236
votes

I want to pass a query parameter prop=xxx.

This didn't work

<a [routerLink]="['/somepath', {queryParams: {prop: 'xxx'}}]">
  Somewhere
</a>
3
angularangular2-routing
The syntax that you want to use is for matrix parameters and this is the form <a [routerLink]="['/somepath', { foo: 'foo' }]">Somewhere</a>, this gives you a matrix url parameters (semicolon ; instead of ? and & separators) and you can access this by ActivatedRoute.params instead activatedRoute.queryParams More information here stackoverflow.com/questions/35688084/… and here stackoverflow.com/questions/2048121/… – William Ardila
Query parameters and matrix parameters are the same. The only difference is when they are added to the root segment, they are serialized as query parameters, when they are added to a child segment, they are serialized as matrix parameters. – Günter Zöchbauer
Have some more differences check this web.archive.org/web/20130126100355/http://brettdargan.com/blog/… Also you can check the link parameter syntax in the angular doc here angular.io/docs/ts/latest/guide/… – William Ardila

3 Answers

472
votes

queryParams

queryParams is another input of routerLink where they can be passed like

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

fragment

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

routerLinkActiveOptions

To also get routes active class set on parent routes:

[routerLinkActiveOptions]="{ exact: false }"

To pass query parameters to this.router.navigate(...) use

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

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

See also https://angular.io/guide/router#query-parameters-and-fragments

19
votes
<a [routerLink]="['../']" [queryParams]="{name: 'ferret'}" [fragment]="nose">Ferret Nose</a>

foo://example.com:8042/over/there?name=ferret#nose
\_/   \______________/\_________/ \_________/ \__/
 |           |            |            |        |
scheme    authority      path        query   fragment

For more info - https://angular.io/guide/router#query-parameters-and-fragments

3
votes

You can check out this as well.

 <router-link
 
:to="{name:'router-name', params: { id:param1}, query:{link:query1}}"

>
 link name

 </router-link
>