CODEWITHSUNDEEP
angularangular2-routingangular2-template
Alexander Ciesielski
Alexander Ciesielski

Reputation: 10824

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.

Upvotes: 22

Views: 24427

Answers (4)

Anand Raja
Anand Raja

Reputation: 3098

skipLocationChange property is false by default. It will ensure to display the navigation url in the browser. If we want to hide the navigation url, skipLocationChange property should be made as true.

It can be achieved in two ways.

  1. Passing object containing skipLocationChange property to the router object reference as below mentioned:

    this.router.navigateByUrl('/someUrlPath', { skipLocationChange: true });

This should be inside the component .ts file

  1. Applying skipLocationChange directive to an HTML <a> anchor tag with the routerLink directive as below:

    <a [routerLink]="['someUrlPath']" [skipLocationChange]="true"> NameOfTheUrl</a>

This would be inside the template .html file.

Upvotes: 2

Poul Kruijt
Poul Kruijt

Reputation: 71891

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]="true">Route1</a></li>

Upvotes: 38

Jason Spence
Jason Spence

Reputation: 564

I'm working in angular v12 and this is what worked for me. I'm also using a named router-outlet, so I didn't want to see the ugly url it produces.

 <button type="button"
  [routerLink]="['/home', { outlets: {subpanel: ['sub-panel']}}]"
  (click)="onShowSubPanel()"
  [skipLocationChange]="true">
  Show Sub-Panel
</button>

Upvotes: 1

Yinon
Yinon

Reputation: 747

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.

Upvotes: 9

Related Questions