angular navigate to the same route with different parameter

Question

Although this question seems to have popped up before, I can't find an answer that works for me, as the router seems to have changed a lot over the lifetime of angular.

In angular 5 I have a component where I wish to edit a user. I navigate to that component with the following code:

this.router.navigate(['editsingleuser',user.username]) 

Which will send me to /editsingleuser/bob

Then, from within that component I can also click on a button to edit my own user details, which uses the following code:

this.router.navigate(['editsingleuser',this.user.sub]) 

Which should send me to /editsingleuser/joe, but does not

Is there a parameter that I can add to the router.navigate that forces it to load the route, as it seems to be doing some kind of caching?

I have also tried using

[routerLink]="['editsingleuser',user?.sub]"  

which also has the same issue

Answer 1

I faced the same issue and this solved it in my case

constructor(private router: Router) {     this.router.routeReuseStrategy.shouldReuseRoute = function () {       return false;     };   } 

Answer 2

In Angular 8, it is possible to load some other route and then return to the current active one. Just try this:

this.router.navigateByUrl('/', {skipLocationChange: true})   .then(()=>this.router.navigate(['editsingleuser',this.user.sub])); 

Credits:

1. How to reload the current route with the angular 2 router
2. https://dev.to/oleksandr/mastering-angular-8-five-things-that-are-good-to-know-to-save-your-time-14hk (Item #5: #5. Reload component on same URL navigation)