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
}]);

Answer 1

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 2

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

Answer 3

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 4

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 5

with Angular ~8

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

works fine