How to pass query parameters with a routerLink

angular angular2-routing
Günter Zöchbauer picture Günter Zöchbauer · Jun 17, 2016 · Viewed 103.9k times · Source

I want to pass a query parameter prop=xxx.

This didn't work

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

Answer

G&#252;nter Z&#246;chbauer picture Günter Zöchbauer · Jun 17, 2016

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

Related questions

How to get current route

The current docs only talk about getting route params, not the actual route segments. For example, if i want to find the parent of current route, how is that possible?

Read More
How to go back last page

Is there a smart way to go back last page in Angular 2? Something like this._router.navigate(LASTPAGE); For example, page C has a Go Back button, Page A -> Page C, click it, back to page A. Page …

Read More
Angular 2 - How to navigate to another route using this.router.parent.navigate('/about')?

Angular 2 - How to navigate to another route using this.router.parent.navigate('/about'). It doesnt seem to work. I tried location.go("/about"); as that didnt work. Basically once a user has logged in I want to redirect …

Read More