How can I specify query parameters by routerLink directive

Question

I am experimenting the new router (version 3.0.0-alpha.7) and would like to know how to specify query parameters by routerLink directive?

The Router.navigate() method below generates a URL like http://localhost:3000/component-a?x=1

this.router.navigate(['/component-a'], {queryParams: {x: 1}});

However, I can't figure out how to do the same thing with the routerLink directive. Template like below returns parser error...

<a [routerLink]="['/component-a'], {queryParams: {x: 1}}">Component A</a>

And the closest thing I can get is http://localhost:3000/component-a;x=1, which uses the syntax for child route.

<a [routerLink]="['/component-a', {x:1}]">Component A</a>

Harry Ninh · Accepted Answer · 2016-07-13 12:03:43Z

16

You can do something like this

<a [routerLink]="['/component-a']" [queryParams]="{x: 1}">Component A</a>

answered Jul 13, 2016 at 12:03

Harry Ninh

16.8k5 gold badges64 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bernardo Pacheco · Accepted Answer · 2016-08-03 12:06:39Z

-1

In the new router component, you can do it in this way:

Passing a parameter in the URL:

<a [routerLink]="['/component-a', 1]">Component A</a>

Passing e query parameter:

<a [routerLink]="['/component-a', { x: 1 }]">Crisis Center</a>

answered Aug 3, 2016 at 12:06

Bernardo Pacheco

1,4451 gold badge14 silver badges23 bronze badges

Where is this documented? I don't see this in the master branch.

@Bernardo Pacheco how do you do this and pass it a variable for x : 1? Could you take a look at stackoverflow.com/q/46574652/1440240