Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pass NavigationExtras to routerLink in template

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.

like image 254
Alexander Ciesielski Avatar asked Nov 08 '16 16:11

Alexander Ciesielski


People also ask

Can we pass object in routerLink?

RouterLink for dynamic dataDynamic data or user-defined objects can be passed from Angular version 7.2 using the state object stored in History API. The state value can be provided using the routerLink directive or navigateByURL.


Video Answer


2 Answers

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>
like image 96
Poul Kruijt Avatar answered Nov 10 '22 14:11

Poul Kruijt


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.

like image 41
Yinon Avatar answered Nov 10 '22 16:11

Yinon