Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?

update 2

This answer is only for a long ago discontinued router version.

See https://angular.io/api/router/RouteReuseStrategy for how to do it in the current router.

update 1

That's now fixed (Angular 2.3) for the new router by https://github.com/angular/angular/pull/13124 which allows to provide a custom reuse strategy.

For an example see also https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx

original

https://github.com/angular/angular/issues/9811

That's a known issue. Currently there is no way to make the router re-create the component on parameter-only route changes.

They discussed plans to implement some reuse-strategies eventually.

You can subscribe to params changes and execute your code there instead of in ngOnInit()

with Angular 7.2, router 7.2 you can do the following.

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

I tried several ways but that was the only way my router did loaded the content of the component I am navigating to.

you can read more about route reuse strategies here

Angular 9

I have used the following and it worked.

  onButtonClick() {
     this.router.routeReuseStrategy.shouldReuseRoute = function () {
     return false;
     }
   this.router.onSameUrlNavigation = 'reload';
   this.router.navigate('/myroute', { queryParams: { index: 1 } });

}

In addition it also works for path params.