We have a route defined in our router module route/:param1/:param2 and we want to reload route every time when we change one of the params. OK, so let's change the param and use router.navigate to change the route.


1. definition of our route on router module


2. change the params and redirect to new route in our ViewComponent

                    //import router
  public router: Router


this.param1 = 'new-value';
this.param2 = 'new-value-2';

// redirect to new route



we render the thing...

execute it...

params is changed...

...no redirect 😖


Actually, the URL is changed but the content of the page stayed the same. How we can fix that?


Easy 😎


In your ViewComponent, set routeReuseStrategy to false, this way we will tell angular to not re-use  same route but instead reload it on every param change

                    ngOnInit(): void {
  this.router.routeReuseStrategy.shouldReuseRoute = () => false;


try again....

render the thing...

execute it...

params is changed...


it's working 👍