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?

Answer 1

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

Answer 2

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

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

Answer 4

with Angular ~8

constructor(private _router: Router) { 
  this._router.onSameUrlNavigation='reload'}

works fine

Answer 5

This code work for both angular 2 and 4. you need to subscribe the param like below

selected_id:any;
constructor(private route: ActivatedRoute) { }
ngOnInit() 
{
    this.route.params.subscribe(params => {
    this.selected_id = params['id']; 
    });
}

suppose still your page not get reloaded, unsubscribe value by using ngOnDestroy.

ngOnDestroy()
{
 this.selected_id.unsubscribe();
}

this will be clear the previous param value

above logic working for me. hope it will help for you.

[Info]
var selected_id = this.route.snapshot.paramMap.get('id');
//earlier i was used this code to get param value,it works when navigate from 
//different page but not in the same page reload