Angular - reload current route on param change

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

                    {
    path:'route/:param1/:param2',
    component:ViewComponent
  }
                  

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

                    //import router
constructor(
  public router: Router
){}

//.......

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

// redirect to new route
this.router.navigate([`route/`]);
                  

Cool,

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...

aaand...

it's working 👍