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

Question

I have this in my .routing.ts file

export const routing = RouterModule.forChild([
{
    path: 'page/:id',
    component: PageComponent
}]);

My PageComponent file checks the id parameter and loads the data accordingly. In previous versions of the router, if i went from /page/4 to /page/25, the page would "reload" and the components would update.

Now when i try navigating to /page/X where X is the id, it only ever loads the first time, then the url changes, but the components do not "reload" again.

Is there something that needs to be passed in to force my components to reload, and call the ngOnInit event?

Solution 1

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()

Solution 2

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

Solution 3

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.

Comments

[Gillardo]

Thank you, subscribing to the params works perfectly

[pushp]

I am facing same issue on ANGULAR 4. is there any solution for this issue?

[MgSam]

What do guards have to do with this?

[Günter Zöchbauer]

@MgSam thanks for the hint. Seems I copied a wrong link when I updated the answer - fixed

[Joseph Moore]

this.router.routeReuseStrategy.shouldReuseRoute = function () { return false; } Is what worked for me

[Halfist]

I need this to work just once - for one specific navigate(), so it won't mess with how router works across the application. Does this answer fit?