Reusing Angular routes across different modules for backbutton functionality

Question

Reusing Angular routes across different modules for backbutton functionality

Insights on my Application (Angular 12):

Comprises of 3 Modules, each containing an overview page with a list and specific detail pages
Each route is assigned an area tag to identify the user's navigation within the module

Goal for Angular´s RouteReuseStrategy implementation:

Reusing the list component when a user navigates from list -> detail page and uses the back button (detect back button trigger)
Avoiding the reuse of the list component when a user navigates to it from a different module / area
Reusing the detail component when a user navigates from one detail page to another (default behavior?)
Clearing / destroying stored components when a user leaves a module by navigating elsewhere or logging out

Current Status:

Implemented a custom RouteReuseStrategy successfully that reuses the list component ✓
- Issue with scroll position restoration which requires separate investigation ✕
Attempting to check the areatag within the route, but ActivatedRouteSnapshots are empty ✕
Facing difficulties in detecting back button press due to frequent event firing and issues with implementing a basic back flag ✕

Missing Components:

Detecting back button navigation and adjusting component reuse accordingly
Identifying the module of the route to modify reuse behavior or clean up stored components

Code Snippets:

Sample route in Module A

{
  path: 'lista',
  component: ListAComponent,
  data: {
    title: 'List overview',
    areaCategory: AreaCategory.A,
    reuseRoute: true,
  },
},
{
  path: 'lista/:id',
  component: DetailAComponent,
  data: {
    title: 'Detail',
    areaCategory: AreaCategory.A,
    reuseRoute: false,
  },
},

Sample route in Module B

{
  path: 'listb',
  component: ListBComponent,
  data: {
    title: 'List overview',
    areaCategory: AreaCategory.B,
    reuseRoute: true,
  },
},
{
  path: 'listb/:id',
  component: DetailBComponent,
  data: {
    title: 'Detail',
    areaCategory: AreaCategory.B,
    reuseRoute: false,
  },
},

app.module.ts

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

Would this placement suffice globally or should it be moved to each of the 3 modules?

ReuseRouteStrategy Implementation:

@Injectable()
export class CustomReuseRouteStrategy implements RouteReuseStrategy {
// Code details omitted for brevity

The inconsistency in the future & current snapshot prompts the need to correctly identify routes/components to access areaCategory for desired functionality.

If you spot any discrepancies or have insights to share, your assistance would be greatly valued.

For further reference, here is a link to a simplified stackblitz showcasing my setup

angular typescript angular-ui-router angular-router

Answer 1

Answer №1

This adheres to your specified conditions

When a user navigates from the list to the detail page and then uses the back button, the list component should be reused (detect when the back button is triggered). Yes. Assuming there are no repeated navigation sequences like list -> detail -> list
If a user navigates to the list component from a different module or area, the list component should not be reused. Yes. Assuming different areas cannot share the same areaCategory tag
When a user navigates from one detail page to another, the detail component should be reused (default behavior?). Yes
Whenever a user leaves a module by navigating to another module or logging out, the stored components should be cleared or destroyed. Yes, similar to point 2.

I am providing additional comments and a diagram to help you understand how to utilize the RouteReuseStrategy.

Below is a diagram along with pseudocode illustrating how Angular core uses the strategy (based on my observations as official documentation is unavailable):

https://i.sstatic.net/2Edsu.png

transition(current, future) {
  if (shouldReuseRoute(future, current)) {
    // No navigation is performed, current route is recycled 
    return current;
  } else {
    if (shouldDetach(current)) {
      // Store current route if not reused and shouldDetach() == true
      store(current, getRouteHandler(current));
    }
    if (shouldAttach(future)) {
      // Retrieve stored route if not reused and shouldAttach() == true
      return createRouteFromHandler(retrieve(future));
    } else {
      // Do not recycle if shouldAttach() == false
      return future;
    }
  }
}

Please note that this is just an example. getRouteHandler and createRouteFromHandler are introduced for illustrative purposes, and no distinction is made between route component, route instance, and route snapshot.

@Injectable()
export class CustomReuseRouteStrategy implements RouteReuseStrategy {
  private handlers: { [key: string]: DetachedRouteHandle } = {};

  clearHandlers() {
    Object.keys(this.handlers).forEach(h => {
      // https://github.com/angular/angular/issues/15873
      (h as any).componentRef.destroy();
    })
    this.handlers = {};
  }

  areSameArea(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    return future.routeConfig.data && current.routeConfig.data
      && future.routeConfig.data.areaCategory === current.routeConfig.data.areaCategory;
  }

  /**
   * This function determines whether the current route should be retained.
   * If it returns `true`, neither attach nor detach procedures are executed.
   * If it returns `false`, an attach/detach procedure is initiated.
   */
  shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    console.log('shouldReuseRoute', future, current);

    if (!this.areSameArea(future, current)) {
      // Area has changed, so clear the cache
      this.clearHandlers();
    }

    return this.getUrl(future) === this.getUrl(current);
  }

  /**
   * DETACH PROCEDURE: Called when performing a detach, if it returns
   * `true`, then the current context is stored.
   */
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    console.log('shouldDetach', route);
    // We always detach them (assuming all pages are recycled by default)
    return true;
  }

  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
    console.log('store', route, this.getUrl(route));
    if (!handler && !this.getUrl(route)) return;
    this.handlers[this.getUrl(route)] = handler;
  }

  /**
   * ATTACH PROCEDURE: Called when performing an attach, if it returns
   * `true`, then the current context is retrieved.
   */
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    console.log('shouldAttach', route);
    return !!this.handlers[this.getUrl(route)];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    console.log('retrieve', route, this.getUrl(route));
    return this.getUrl(route) && this.handlers[this.getUrl(route)];
  }


  private getUrl(route: ActivatedRouteSnapshot): string {
    // Note: Behavior may differ for parametric routes
    return route.routeConfig && route.routeConfig.path;
  }

}

Answer 2

This adheres to your specified conditions

When a user navigates from the list to the detail page and then uses the back button, the list component should be reused (detect when the back button is triggered). Yes. Assuming there are no repeated navigation sequences like list -> detail -> list
If a user navigates to the list component from a different module or area, the list component should not be reused. Yes. Assuming different areas cannot share the same areaCategory tag
When a user navigates from one detail page to another, the detail component should be reused (default behavior?). Yes
Whenever a user leaves a module by navigating to another module or logging out, the stored components should be cleared or destroyed. Yes, similar to point 2.

I am providing additional comments and a diagram to help you understand how to utilize the RouteReuseStrategy.

Below is a diagram along with pseudocode illustrating how Angular core uses the strategy (based on my observations as official documentation is unavailable):

https://i.sstatic.net/2Edsu.png

transition(current, future) {
  if (shouldReuseRoute(future, current)) {
    // No navigation is performed, current route is recycled 
    return current;
  } else {
    if (shouldDetach(current)) {
      // Store current route if not reused and shouldDetach() == true
      store(current, getRouteHandler(current));
    }
    if (shouldAttach(future)) {
      // Retrieve stored route if not reused and shouldAttach() == true
      return createRouteFromHandler(retrieve(future));
    } else {
      // Do not recycle if shouldAttach() == false
      return future;
    }
  }
}

Please note that this is just an example. getRouteHandler and createRouteFromHandler are introduced for illustrative purposes, and no distinction is made between route component, route instance, and route snapshot.

@Injectable()
export class CustomReuseRouteStrategy implements RouteReuseStrategy {
  private handlers: { [key: string]: DetachedRouteHandle } = {};

  clearHandlers() {
    Object.keys(this.handlers).forEach(h => {
      // https://github.com/angular/angular/issues/15873
      (h as any).componentRef.destroy();
    })
    this.handlers = {};
  }

  areSameArea(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    return future.routeConfig.data && current.routeConfig.data
      && future.routeConfig.data.areaCategory === current.routeConfig.data.areaCategory;
  }

  /**
   * This function determines whether the current route should be retained.
   * If it returns `true`, neither attach nor detach procedures are executed.
   * If it returns `false`, an attach/detach procedure is initiated.
   */
  shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    console.log('shouldReuseRoute', future, current);

    if (!this.areSameArea(future, current)) {
      // Area has changed, so clear the cache
      this.clearHandlers();
    }

    return this.getUrl(future) === this.getUrl(current);
  }

  /**
   * DETACH PROCEDURE: Called when performing a detach, if it returns
   * `true`, then the current context is stored.
   */
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    console.log('shouldDetach', route);
    // We always detach them (assuming all pages are recycled by default)
    return true;
  }

  store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
    console.log('store', route, this.getUrl(route));
    if (!handler && !this.getUrl(route)) return;
    this.handlers[this.getUrl(route)] = handler;
  }

  /**
   * ATTACH PROCEDURE: Called when performing an attach, if it returns
   * `true`, then the current context is retrieved.
   */
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    console.log('shouldAttach', route);
    return !!this.handlers[this.getUrl(route)];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    console.log('retrieve', route, this.getUrl(route));
    return this.getUrl(route) && this.handlers[this.getUrl(route)];
  }


  private getUrl(route: ActivatedRouteSnapshot): string {
    // Note: Behavior may differ for parametric routes
    return route.routeConfig && route.routeConfig.path;
  }

}

Reusing Angular routes across different modules for backbutton functionality

Answer №1

Similar questions

The npm warning indicates that the file node_modules/.staging/typescript-8be04997/lib/zh-CN/diagnosticMessages.generated.json does not exist due to an ENOENT error

The functionality of multiple UI-Views is not meeting the intended outcomes

Executing a function within JSX to dismiss a modal in NextJS

Crafting a recursive Typescript Immutable.js Record through typing

Ways to enlarge image size without compromising the image resolution?

The fieldset css in PrimeNG differs from the website's original design

Ways to deactivate a text area or mat-form-field

Showing JSON response on an HTML page using AngularJS

A guide on utilizing portals in Next.js to move a child element beyond its direct parent container

Troubleshooting fastify library errors related to ajv validation

Angular 4: Triggering Scroll Event when Select Dropdown Reaches End

Speedier display of information in angular2

Using Express and Node.js, fetch an image from one localhost and transfer it to another localhost

Implementing Expand/Collapse functionality for multiple TableRow components in Material-UI

Discover the type of generic keyof in TypeScript

Is the transcluded content visible to the class as a whole?

Dealing with ObjectUnsubscribedError in RxJS subscriptions with Angular

Issue with launching Angular 6 project

Please exclude any files with the name npm-debug.log.XXXXXX in the .gitignore file

Loading only specific HTML list elements in segments