Angular 2 reload route on param change Angular 2 reload route on param change typescript typescript

Angular 2 reload route on param change


You can change the routeReuseStrategy directly at the component level:

constructor(private router: Router) {      // force route reload whenever params change;      this.router.routeReuseStrategy.shouldReuseRoute = () => false;}

Likewise, the reuse strategy can be changed globally.

This does not necessarily address your problem directly but seeing how this question is the first search result for "angular 2 reload url if query params change" it might save the next person from digging through the github issues.


As per the first final release, this is resolved.

Just pay much attention to correctly reset the state of the component when the parameter changes

this.route.params.subscribe(params => {    this.param = params['yourParam'];    this.initialiseState(); // reset and set based on new parameter this time});


Another alternative that should be added here is to provide a RouteReuseStrategy to your module.

providers: [  {    provide: RouteReuseStrategy,    useClass: AARouteReuseStrategy  }]

The default behaviour of the router is to reuse the route if the configuration is the same (which is the case when only changing the :id param in this question). By changing the strategy to not reuse the route, the component will be reloaded, and you do not have to subscribe to route changes in the component.

An implementation of the RouteReuseStrategy could be like this:

export class AARouteReuseStrategy extends RouteReuseStrategy {  shouldDetach(route: ActivatedRouteSnapshot): boolean {    return false;  }  store(route: ActivatedRouteSnapshot, handle: {}): void {  }  shouldAttach(route: ActivatedRouteSnapshot): boolean {    return false;  }  retrieve(route: ActivatedRouteSnapshot): {} {     return null; } shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {   return false; // default is true if configuration of current and future route are the same }}

I've written some about it here too:

https://pjsjava.blogspot.no/2018/01/angular-components-not-reloading-on.html