Reload page in Angular 8: Proper way

Programming
, , ,
1

Issue: Reloading Routes in Angular 8

I’m using Angular 8 and would like to reload a route using a generic path, rather than a hard-coded one.

I have two utility methods - one for navigating to the parent node and one for reloading self. The first one works as supposed to, while the other one fails to cause the reload.

navigateToParent(route: ActivatedRoute) {
  const options: NavigationExtras = { relativeTo: route };
  this.router.navigate([".."], options);
}

navigateToSelf(route: ActivatedRoute) {
  this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  this.router.onSameUrlNavigation = "reload";
  const self = ".";
  this.router.navigate([self]);

  // const options: NavigationExtras = { relativeTo: route };
  // this.router.navigate(["."], options);
}

I followed the answer here, with the only exception that I’d like my path navigated to, to be generic, not hard-coded. I’ve tried passing different parameters, like self=“.” and self=“” etc. Nothing seems to give me the desired reload.

I also tried to pick the parts from the route passed into the service’s method but I only see a bunch of observables, not the actual segments. And, of course, this.router.navigate(route) only caused an error.

Googling produced a lot of hints with vastly varying suggestions, which leads me to the suspicion that the correct approach might be heavily dependent on the version (I’m on 8.0).

Question

What do I need to do to reload a route using a generic path in Angular 8?

2

To reload a route using a generic path in Angular 8, you can use the following code:

navigateToSelf() {
  this.router.navigateByUrl('/RefreshComponent', {skipLocationChange: true}).then(() => {
    this.router.navigate([this.router.url]);
  });
}

This will navigate to a dummy route “RefreshComponent” and then immediately navigate back to the current route, thus reloading it.