dasunpubudumal
2/1/2018 - 4:07 PM

RouteReuse Strategy for Angular 4 (Tested). This can be used to remember the state of a particular component. E.g - When a certain route is

RouteReuse Strategy for Angular 4 (Tested). This can be used to remember the state of a particular component. E.g - When a certain route is visited again, it should not recreate the route again but display the route at its previous state.

CustomRouteReuseStrategy.ts
content_copyfile_download
import {ActivatedRouteSnapshot, DetachedRouteHandle} from "@angular/router";

export class Customreuse {

  handlers: {[key: string]: DetachedRouteHandle} = {};

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.data && (route.data as any).shouldDetach;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    console.debug('CustomReuseStrategy:store', route, handle);
    this.handlers[route.routeConfig.path] = handle;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    console.debug('CustomReuseStrategy:shouldAttach', route);
    return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    console.debug('CustomReuseStrategy:retrieve', route);
    if (!route.routeConfig) return null;
    return this.handlers[route.routeConfig.path];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    console.debug('CustomReuseStrategy:shouldReuseRoute', future, curr);
    return future.routeConfig === curr.routeConfig;
  }

}