Angular - Navigate to current same URL with component reload not the whole page

Question

I am using Angular 5 library, I want to navigate to the current URL with reload (refresh) the whole component, not the page, I have read about navigation to current URL in Angular document.

And that it is what I need:

 /**
 * Define what the router should do if it receives a navigation request to the current URL.
 * By default, the router will ignore this navigation. However, this prevents features such
 * as a "refresh" button. Use this option to configure the behavior when navigating to the
 * current URL. Default is 'ignore'.
 */
onSameUrlNavigation: 'reload' | 'ignore';

Now, I have tried to set the onSameUrlNavigation property to reload and then navigate to the same URL, but nothing happend, like this:

this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['view'], { queryParams: { QueryUUID: selectedId } });

Anyone who has used this before can help?

Answer 1

If I understand you correctly, this is how I do it:

ngOnInit(): void {
    this.route.params.subscribe(
        params => {
            const id = +params['id'];
            this.getMovie(id);
        }
    );
}

Or to watch query parameters:

ngOnInit(): void {
    this.route.queryParams.subscribe(param => {
        this.pageTitle = 'Movie List';
        this.getMovies();
    });
}

In the ngOnInit, I watch for changes to the parameters. When the parameters change, I re-retrieve the data.

Since the data is all bound, the page "refreshes" with the newly retrieved data.

Answer 2

I have found this workaround method since the onSameUrlNavigation property in Angular 5.1 is not what I need.

I just need to override shouldReuseRoute, so added an exception for the component route that I want to refresh, if the current and future route are equal view.

And also I can navigate to other routes without problems, even for navigate from Angular Material sidenav.

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
};

---

Update:

For those they want to use the new onSameUrlNavigation property in Angular 5.1 you can refer to this blog:

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

---

Update:

It is better to create a custom RouteReuseStrategy that override the default behavior, here it is how I do that:

export class AppRouteReuseStrategy implements BaseRouteReuseStrategy {

  // all other methods will be the same as the default

  /*
  * Determines if a route should be reused.
  * This strategy returns `true` when the future route config and current route config are identical.
  * 
  * but we want to refresh the route if the data.refreshComponent is true in the route definition
  * */
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // so we need to check if it is true. if not, we return the default behavior
    return future.data.refreshComponent ? false : future.routeConfig === curr.routeConfig;
  }
}

Then will add this as a provider in the AppModule:

{ provide: RouteReuseStrategy, useClass: AppRouteReuseStrategy }

And the last thing to do is to mark which component you want to refresh in case of navigate to the same route, like this:

const routes: Routes = [
  {
    path: 'view',
    component: ViewComponent,
    data: { refreshComponent: true },
  }
]

Answer 3

In route module: add below in each route declaration

runGuardsAndResolvers: 'always'

and

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

for e.g category/:id

and this below part will be under Component

ngOnInit() {
    this.activeRoute.queryParams.subscribe(queryParams => {
        // do something with the query params
    });
        this.activeRoute.params.subscribe(routeParams => {
        this.loadUserDetail(routeParams.id);
    });
}

for each route change say for e.g category/11 and category/12 it will call loadUserDetail function everytime.

So without refreshing page you will fetch data from server and update dom for same route with different roureParams.

Answer 4

In terms of rel-loading the entire page, the normal <a href="/">Reload Page</a> tag works just fine for me. I tried using the "onSameUrlNavigation" function, but it was not reloading the entire page the way I want.

Answer 5

You can use the angular router events for this purpose.

import { takeUntil, filter } from "rxjs/operators";
import { Router, NavigationEnd } from "@angular/router";

this.router.events.pipe(
      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
      takeUntil(this._unsubscribeAll),
).subscribe(() => {
      this.cache = {};
      this.cachedRows = [];
      this.getRollingJobs(this.page);
});