title: Angular RouterReuseStrategy, how to reuse only from specific routes?
body: <p>I have <code>RouterReuseStrategy</code> in place for my application, that looks like below</p>
  
  <pre><code>import {
      RouteReuseStrategy,
      ActivatedRouteSnapshot,
      DetachedRouteHandle,
  } from '@angular/router';
  
  
  export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  
      private handlers: { [key: string]: DetachedRouteHandle } = {};
  
      /**
       * Determines if this route (and its subtree) should be detached to be reused later
       */
      shouldDetach(route: ActivatedRouteSnapshot): boolean {
  
          if (!route.routeConfig || route.routeConfig.loadChildren) {
              return false;
          }
          /** Whether this route should be re used or not */
          let shouldReuse = false;
          if (route.routeConfig.data) {
              route.routeConfig.data.reuse ? shouldReuse = true : shouldReuse = false;
          }
          //Check the from route and decide whether to reuse or not
          if(route.routeConfig.path == 'page1') {
              shouldReuse = false;
          } else {
              shouldReuse = true;
          }
          return shouldReuse;
      }
  
      /**
       * Stores the detached route.
       */
      store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
          console.log('[router-reuse] storing handler');
          if (handler) {
              this.handlers[this.getUrl(route)] = handler;
          }
      }
  
      /**
       * Determines if this route (and its subtree) should be reattached
       * @param route Stores the detached route.
       */
      shouldAttach(route: ActivatedRouteSnapshot): boolean {
          return !!this.handlers[this.getUrl(route)];
      }
  
      /**
       * Retrieves the previously stored route
       */
      retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
          if (!route.routeConfig || route.routeConfig.loadChildren) {
              return null;
          }
  
          return this.handlers[this.getUrl(route)];
      }
  
      /**
       * Determines if a route should be reused
       */
      shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
          /** We only want to reuse the route if the data of the route config contains a reuse true boolean */
          let reUseUrl = false;
  
          if (future.routeConfig) {
              if (future.routeConfig.data) {
                  reUseUrl = future.routeConfig.data.reuse;
              }
          }
  
          /**
           * Default reuse strategy by angular assers based on the following condition
           * @see https://github.com/angular/angular/blob/4.4.6/packages/router/src/route_reuse_strategy.ts#L67
           */
          const defaultReuse = (future.routeConfig === current.routeConfig);
  
          // If either of our reuseUrl and default Url are true, we want to reuse the route
          //
          return reUseUrl || defaultReuse;
      }
  
      /**
       * Returns a url for the current route
       */
      getUrl(route: ActivatedRouteSnapshot): string {
          /** The url we are going to return */
          let next = route;
          // Since navigation is usually relative
          // we go down to find out the child to be shown.
          while (next.firstChild) {
            next = next.firstChild;
          }
          let segments = '';
          // Then build a unique key-path by going to the root.
          while (next) {
            segments += next.url.join('/');
            next = next.parent;
          }
          return segments;
      }
  }
  </code></pre>
  
  <p>Route configuration in the module,</p>
  
  <pre><code>{ path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component , data: {reuse: true}},
  { path: 'page3', component: Page3Component },
  </code></pre>
  
  <p>As seen reuse is set to true for page2 component, I want the reuse to work in page2 component only when  I'm coming <strong>from page3</strong> to <strong>page2</strong> and <strong>not</strong> from <strong>page1</strong> to <strong>page2</strong></p>
  
  <p>I have made changes in <code>shouldDetach</code> method to check the from route and decide whether to detach or not. But this doesn't seem to work. Am I missing anything?</p>