2

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.

kamalav
  • 1,190
  • 4
  • 14
  • 31

2 Answers2

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.

Armen Vardanyan
  • 3,214
  • 1
  • 13
  • 34
  • 2
    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 – Armen Vardanyan Nov 21 '17 at 09:33
  • 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 – kamalav Nov 21 '17 at 09:59
  • 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?' – Armen Vardanyan Nov 21 '17 at 09:59
  • I need to navigate from a to b.but url should be a.on refereshing page content sholud be of b. – kamalav Nov 21 '17 at 10:06
  • 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 – Armen Vardanyan Nov 21 '17 at 10:14
  • But I don't really see why you would even need this kind of functionality – Armen Vardanyan Nov 21 '17 at 10:15
  • i need to change content without changing url – kamalav Nov 21 '17 at 10:18
  • Then maybe you should seek some other approach like using `ngIf` on some content or so. You cannot solve this using routes – Armen Vardanyan Nov 21 '17 at 10:19
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.

Robin Dijkhof
  • 18,665
  • 11
  • 65
  • 116