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>

Answer 1

You can do something like this

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

Answer 2

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>