Changing route without changing url in angular 5 [duplicate]

Question

I changed my route without changing url using skipLocationChange attribute like below.

          <a [routerLink]="['/articledetail']" skipLocationChange><h4>
                    {{article.HeadLine}}</h4></a>

But it goes to previous route while I am refreshing the page.It should be in latest route.How can I do that.pls help me.

Armen Vardanyan · Accepted Answer · 2017-11-21 09:29:24Z

8

Browser does not know anything about the Angular routing. skipLocationChange does what it says - it does not register a state change anywhere, not in the browser history either. If you go to '/b' from '/a' skipping the location change, browser still thinks you are on '/a'. But you can try the following:

import { Location } from '@angular/common';
import { Router } from '@angular/router';
...
constructor(private location: Location, private router: Router) {}
...
// handle navigation not  by routerLink, but manually inside your component:
public navigate(): void {
   this.router.navigateByUrl('/articledetail', {skipLocationChange: true});
   this.location.replaceState('/articledetail');

}

And in your html:

<a (click)="navigate()">Your title</a>

But I don't clearly see the point of this, because skipLocationChange's purpose is to actually trick the browser into thinking that no state change has occurred.

answered Nov 21, 2017 at 9:29

Armen Vardanyan

3,3251 gold badge16 silver badges34 bronze badges

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

8 Comments

Armen Vardanyan Over a year ago

Oh. sorry, I actually even know a usage for this technique, as i used it in my current project: you can have tabs with different content in your page, and have a url assigned to each of this tabs, and use this to have a clean history (only the last tab's url will be stored in the browser's history, as you use replaceState, but when the user clicks on the browser's back button it won't navigate to previous tabs, but rather the previous page). And yes, this should actually solve your problem

kamalav Over a year ago

thanks.but its not working as i am expected.my route is changed before navigation itself.After clicking on anchor tag it should goes to next route and should not change url

Armen Vardanyan Over a year ago

So wait, do you want to: 1. navigate from '/a' to '/b' 2. But the browser will still display '/a' 3. On refresh you want '/b to be shown?'

kamalav Over a year ago

I need to navigate from a to b.but url should be a.on refereshing page content sholud be of b.

Armen Vardanyan Over a year ago

You see, this is even theoretically impossible. You app is destroyed, the only 'state' which is left is your url, which points to '/a', which will be loaded after refresh

|

Robin Dijkhof · Accepted Answer · 2017-11-21 09:28:36Z

2

You simply can't. When refreshing the page, the current state of your application is destroyed. The only "thing" that has a state is your url. Since you skip the location change it returns to the previous page.

answered Nov 21, 2017 at 9:28

Robin Dijkhof

19.3k14 gold badges72 silver badges127 bronze badges

1 Comment

Armen Vardanyan Over a year ago

That's not completely true, see my answer for a possible solution.

Collectives™ on Stack Overflow

Changing route without changing url in angular 5 [duplicate]

2 Answers 2

8 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Linked

Related