One way to modify the routeReuseStrategy is by adjusting it at the component level:

constructor(private router: Router) {

      // Ensure route reloads when parameters change
      this.router.routeReuseStrategy.shouldReuseRoute = () => false;

}

Alternatively, the reuse strategy can be altered globally.

While this may not directly solve your issue, since this question appears as the top search result for "angular 2 reload url if query params change", it could potentially prevent others from having to sift through github issues.

Another great addition to consider is implementing a RouteReuseStrategy within your module.

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

The router typically reuses the route if the configuration remains the same (such as when only changing the :id param in this case). By altering the strategy to avoid route reuse, the component will reload without needing to handle route changes in the component directly.

An example implementation of the RouteReuseStrategy could be:

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
 }
}

Additional information on this topic can also be found here:

Adding Router to Your Angular 7 Project

import { Router } from '@angular/router';

Initializing the Router Object

constructor(private router: Router) {

}

Implementing routeReuseStrategy for Monitoring Parameter Changes

ngOnInit() {
    this.router.routeReuseStrategy.shouldReuseRoute = () => {
      // Perform tasks before changing routes

      return false;
    }
}

Implement this code snippet within your constructor() method

this.router.routeReuseStrategy.shouldReuseRoute = () => false;

Is it possible to detect any changes in the received parameters? In my scenario, I am loading the information using a Resolve so I don't need the parameter (just need to detect if it changes). Here is how I tackled this issue:

public product: Product; 
private parametersObservable: any;

constructor(private route: ActivatedRoute) {
}

ngOnInit() {
  this.parametersObservable = this.route.params.subscribe(params => {
    //"product" is retrieved from 'ProductResolver'
    this.product = this.route.snapshot.data['product']; 
  });
}

// Remember to unsubscribe from the Observable
ngOnDestroy() {
  if(this.parametersObservable != null) { 
    this.parametersObservable.unsubscribe(); 
  } 
} 

Unsure if there is a similar solution to the problem I am about to propose, but here it is anyways:

I discovered a method for achieving a 'fake' reload.

Essentially, what I did was create a Component that redirects me to the desired 'real' component:

@Component({
  selector: 'camps-fake',
  template: ''
})
export class FakeComponent implements OnInit {

  constructor(private _router:Router,
              private _route:ActivatedRoute)
  { }

  ngOnInit() {
    let id:number = -1;
    this._route.params.forEach((params:Params) => {
      id = +params['id'];
    });

    let link:any[] = ['/details', id];
    this._router.navigate(link);
  }

}

When selecting a list item, the router will then navigate to /fake/:id, extracting the id from the URL and leading to the 'real' component.

While there may be simpler or more stylish solutions available, I find this method effective as the fake component remains inconspicuous. The only drawback may be the slight 'flashing' during the page reload, but with some CSS knowledge, there could potentially be a transition to address that issue.

this.route.paramMap.subscribe(params => {
  //retrieve the updated parameters here and activate the ngOnInit function to refresh the page
  this.ngOnInit();
 });

By simply invoking ngOnInit() within the paramMap, you can trigger a complete reload of the page with fresh data.

Here's a solution that might be of assistance.

constructor(private router: Router){
 // customizing the route reuse strategy

 this.router.routeReuseStrategy.shouldReuseRoute = function(){
    return false;
 }

 this.router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
       // deceiving the Router into thinking its last link wasn't previously loaded
       this.router.navigated = false;
       // you can also scroll back to the top here if needed
       window.scrollTo(0, 0);
    }
});

}

After searching for a suitable solution for Angular 8, I encountered various suggestions that were not satisfactory. Some methods resulted in infinite loops causing a stack overflow, while others seemed too makeshift for my liking. Fortunately, I came across an effective solution online which I will summarize here instead of sharing just a link. This solution allows customization for specific routes without the need for creating custom classes.

I found this solution from Simon McClive's article at https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

To implement this solution, start by adjusting your app-routing module configuration:

@ngModule({ imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: ‘reload’})],
exports: [RouterModule] })

Then, modify the specific routes you wish to impact. If authentication is not required, you can exclude the canActivate parameter:

export const routes: Routes = [
 {
   path: ‘invites’,
   component: InviteComponent,
   children: [
     {
       path: ‘’,
       loadChildren: ‘./pages/invites/invites.module#InvitesModule’,
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: ‘always’, //choose 'always', 'paramsOrQueryParamsChange', or 'pathParamsChange'
 }
]

Finally, update your component to listen for navigation events and respond accordingly (don't forget to unregister the listener when needed):

export class AwesomeComponent implements OnInit, OnDestroy{

 // ... define your class variables here
 navigationSubscription;

 constructor( private router: Router ) {

   // subscribe to the router events and store the subscription for future unsubscription

   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // Check for NavigationEnd event and re-initialize the component
     if (e instanceof NavigationEnd) {
       this.myInitFn();
     }
   });
 }

 myInitFn() {
   // Reset any changes caused by route parameter modifications
   // Perform data fetching, service calls, etc.
 }

 ngOnDestroy() {
    // Clean up to prevent memory leaks
    if (this.navigationSubscription) {  
       this.navigationSubscription.unsubscribe();
    }
  }
}

My solution involved using an event system in which the child component sends a new link and emits an event. The parent component can then detect this change and trigger a reload function to refresh the necessary data. Alternatively, you can subscribe to the route parameters and monitor for any changes. I believe it would be beneficial for Angular developers to consider adding parameters to the router.navigate function that could facilitate forced reloading (e.g. forceReload=true).

To efficiently manage data updates in your Angular template, consider using Observables along with the | async pipe.

(excerpted from https://medium.com/@juliapassynkova/angular-2-component-reuse-strategy-9f3ddfab23f5 - for more information )

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/pluck';

@Component({
  selector: 'app-detail-reusable',
  template: `<p>detail reusable for {{id$| async}} param </p>`
})
export class DetailReusableComponent implements OnInit {
  id$: Observable<string>;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.id$ = this.route.params.pluck('id');
  }
}

If you need to fetch additional data from a RESTful API, consider utilizing switchMap:

import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/pluck';

@Component({
  selector: 'app-detail-reusable',
  template: `<ul><li *ngFor="let item of items$ | async">{{ item.name }}</li></ul>`
})
export class DetailReusableComponent implements OnInit {
  items$: Observable<string[]>;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.items$ = this.route.params.pipe(
      pluck("id"),
      switchMap(id => this.http.get<string[]>(`api/items/${id}`))  // adjust as needed for object type
    );
  }
}

The | async pipe will handle subscription automatically, ensuring that the id$ or items$ observable is updated when there are changes to the route parameter, thus triggering an API call (in the case of items$) and updating the view accordingly.

Unfortunately, direct support for this feature is currently not available. Check out https://github.com/angular/angular/issues/9811 for more information.

However, you can implement something similar to the following:

<div *ngIf="doShow" class="row">
  <div class="col-lg-8">
    <router-outlet></router-outlet>
  </div>
  <div class="col-lg-4">
    <app-list></app-list>
  </div>
</div>

doShow:boolean: true;

constructor(private _activatedRoute: ActivatedRoute, private _router:Router, private cdRef:ChangeDetectorRef) {
  _router.routerState.queryParams.subscribe(
    data => {
      console.log('queryParams', data['st']); 
      this.doShow = false;
      this.cdRef.detectChanges();
      this.doShow = true;
  });
}

(Please note that this code has not been tested yet)

Implementing this solution in the constructor proved to be extremely effective.

this.router.routeReuseStrategy.shouldReuseRoute = () => false;

However, changing the behavior of the route reuse strategy affected the entire application! I experimented with various approaches in an attempt to find a more elegant solution without having to start from scratch.

The answer became clear - simply set the value to true when destroying the component.

ngOnDestroy() {
    this.router.routeReuseStrategy.shouldReuseRoute = () => true;
}