Pass NavigationExtras to routerLink in template

Question

I want to disable changing the URL when routing in my Angular 2 app.

I know that skipLocationChange: true has to be passed as a NavigationExtras parameter to the router.

My question is:

Is it possible to pass NavigationExtras to a routerLink from inside the template?

What I have tried:

<h1>
  {{title}}
</h1>

<ul>
    <li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a></li>
    <li><a [routerLink]="['route2', { skipLocationChange: true }]">Route2</a></li>
</ul>

<router-outlet></router-outlet>

but it does not work.

After clicking a link, the route changes to http://localhost:4200/route2;skipLocationChange=true

I don't want to use this.router.navigate(['route1], {skipLocationChange: true) in my controller, since then I lose routerLinkAtive highlighting.

Answer 1

you can provide any of the NavigationExtras properties on the routerLink tag itself as individual attributes.

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

the documentation on RouterLink attributes is clear.

Answer 2

There is no way (for now and afaik) to both have routerLinkActive and skipLocationChange simultaneously and expect the result you want. You can, according to the api, add options, but there is no skipLocationChange option.

You can however use the NavigationExtras from the router in combination with ActivatedRoute and base upon that whether or not the link should be active

update

Since 2.3.0-beta.0 you can add the skipLocationChange option to the routerLink directive:

<li><a [routerLink]="['route1']" skipLocationChange>Route1</a></li>