Don't be intimidated by the accepted answer, this is pretty straightforward. Here's a quick answer what you need. I would recommend at least reading the accepted answer, as it's full of great detail.

This solution doesn't do any parameter comparison like the accepted answer but it will work fine for storing a set of routes.

app.module.ts imports:

import { RouteReuseStrategy } from '@angular/router';import { CustomReuseStrategy, Routing } from './shared/routing';@NgModule({//...providers: [{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy },]})

shared/routing.ts:

export class CustomReuseStrategy implements RouteReuseStrategy {routesToCache: string[] = ["dashboard"];storedRouteHandles = new Map<string, DetachedRouteHandle>();// Decides if the route should be storedshouldDetach(route: ActivatedRouteSnapshot): boolean {return this.routesToCache.indexOf(route.routeConfig.path) > -1;}//Store the information for the route we're destructingstore(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {this.storedRouteHandles.set(route.routeConfig.path, handle);}//Return true if we have a stored route object for the next routeshouldAttach(route: ActivatedRouteSnapshot): boolean {return this.storedRouteHandles.has(route.routeConfig.path);}//If we returned true in shouldAttach(), now return the actual route data for restorationretrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {return this.storedRouteHandles.get(route.routeConfig.path);}//Reuse the route if we're going to and from the same routeshouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}}

In the addition to the accepted answer (by Corbfon) and Chris Fremgen's shorter and more straightforward explanation, I want to add a more flexible way of handling routes that should use the reuse strategy.

Both answers store the routes we want to cache in an array and then check if the current route path is in the array or not. This check is done in shouldDetach method.

I find this approach inflexible because if we want to change the name of the route we would need to remember to also change the route name in our CustomReuseStrategy class. We may either forget to change it or some other developer in our team may decide to change the route name not even knowing about the existence of RouteReuseStrategy.

Instead of storing the routes we want to cache in an array, we can mark them directly in RouterModule using data object. This way even if we change the route name, the reuse strategy would still be applied.

{path: 'route-name-i-can-change',component: TestComponent,data: {reuseRoute: true}}

And then in shouldDetach method we make a use of that.

shouldDetach(route: ActivatedRouteSnapshot): boolean {return route.data.reuseRoute === true;}

Another implementation more valid, complete and reusable. This one supports lazy loaded modules as @Uğur Dinç and integrate @Davor route data flag. The best improvement is the automatic generation of an (almost) unique identifier based on page absolute path. This way you don't have to define it yourself on every page.

Mark any page that you want to cache setting reuseRoute: true. It will be used in shouldDetach method.

{path: '',component: MyPageComponent,data: { reuseRoute: true },}

This one is the simplest strategy implementation, without comparing query params.

import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle, UrlSegment } from '@angular/router'export class CustomReuseStrategy implements RouteReuseStrategy {storedHandles: { [key: string]: DetachedRouteHandle } = {};shouldDetach(route: ActivatedRouteSnapshot): boolean {return route.data.reuseRoute || false;}store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {const id = this.createIdentifier(route);if (route.data.reuseRoute) {this.storedHandles[id] = handle;}}shouldAttach(route: ActivatedRouteSnapshot): boolean {const id = this.createIdentifier(route);const handle = this.storedHandles[id];const canAttach = !!route.routeConfig && !!handle;return canAttach;}retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {const id = this.createIdentifier(route);if (!route.routeConfig || !this.storedHandles[id]) return null;return this.storedHandles[id];}shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}private createIdentifier(route: ActivatedRouteSnapshot) {// Build the complete path from the root to the input routeconst segments: UrlSegment[][] = route.pathFromRoot.map(r => r.url);const subpaths = ([] as UrlSegment[]).concat(...segments).map(segment => segment.path);// Result: ${route_depth}-${path}return segments.length + '-' + subpaths.join('/');}}

This one also compare the query params. compareObjects has a little improvement over @Corbfon version: loop through properties of both base and compare objects. Remember that you can use an external and more reliable implementation like lodash isEqual method.

import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle, UrlSegment } from '@angular/router'interface RouteStorageObject {snapshot: ActivatedRouteSnapshot;handle: DetachedRouteHandle;}export class CustomReuseStrategy implements RouteReuseStrategy {storedRoutes: { [key: string]: RouteStorageObject } = {};shouldDetach(route: ActivatedRouteSnapshot): boolean {return route.data.reuseRoute || false;}store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {const id = this.createIdentifier(route);if (route.data.reuseRoute && id.length > 0) {this.storedRoutes[id] = { handle, snapshot: route };}}shouldAttach(route: ActivatedRouteSnapshot): boolean {const id = this.createIdentifier(route);const storedObject = this.storedRoutes[id];const canAttach = !!route.routeConfig && !!storedObject;if (!canAttach) return false;const paramsMatch = this.compareObjects(route.params, storedObject.snapshot.params);const queryParamsMatch = this.compareObjects(route.queryParams, storedObject.snapshot.queryParams);console.log('deciding to attach...', route, 'does it match?');console.log('param comparison:', paramsMatch);console.log('query param comparison', queryParamsMatch);console.log(storedObject.snapshot, 'return: ', paramsMatch && queryParamsMatch);return paramsMatch && queryParamsMatch;}retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {const id = this.createIdentifier(route);if (!route.routeConfig || !this.storedRoutes[id]) return null;return this.storedRoutes[id].handle;}shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}private createIdentifier(route: ActivatedRouteSnapshot) {// Build the complete path from the root to the input routeconst segments: UrlSegment[][] = route.pathFromRoot.map(r => r.url);const subpaths = ([] as UrlSegment[]).concat(...segments).map(segment => segment.path);// Result: ${route_depth}-${path}return segments.length + '-' + subpaths.join('/');}private compareObjects(base: any, compare: any): boolean {// loop through all propertiesfor (const baseProperty in { ...base, ...compare }) {// determine if comparrison object has that property, if not: return falseif (compare.hasOwnProperty(baseProperty)) {switch (typeof base[baseProperty]) {// if one is object and other is not: return false// if they are both objects, recursively call this comparison functioncase 'object':if (typeof compare[baseProperty] !== 'object' || !this.compareObjects(base[baseProperty], compare[baseProperty])) {return false;}break;// if one is function and other is not: return false// if both are functions, compare function.toString() resultscase 'function':if (typeof compare[baseProperty] !== 'function' || base[baseProperty].toString() !== compare[baseProperty].toString()) {return false;}break;// otherwise, see if they are equal using coercive comparisondefault:// tslint:disable-next-line triple-equalsif (base[baseProperty] != compare[baseProperty]) {return false;}}} else {return false;}}// returns true only after false HAS NOT BEEN returned through all loopsreturn true;}}

If you have a best way to generate unique keys comment my answer, I will update the code.

Thank you to all the guys who shared their solution.

To use Chris Fremgen's strategy with lazily loaded modules, modify CustomReuseStrategy class to the following:

import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';export class CustomReuseStrategy implements RouteReuseStrategy {routesToCache: string[] = ["company"];storedRouteHandles = new Map<string, DetachedRouteHandle>();// Decides if the route should be storedshouldDetach(route: ActivatedRouteSnapshot): boolean {return this.routesToCache.indexOf(route.data["key"]) > -1;}//Store the information for the route we're destructingstore(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {this.storedRouteHandles.set(route.data["key"], handle);}//Return true if we have a stored route object for the next routeshouldAttach(route: ActivatedRouteSnapshot): boolean {return this.storedRouteHandles.has(route.data["key"]);}//If we returned true in shouldAttach(), now return the actual route data for restorationretrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {return this.storedRouteHandles.get(route.data["key"]);}//Reuse the route if we're going to and from the same routeshouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}}

finally, in your feature modules' routing files, define your keys:

{ path: '', component: CompanyComponent, children: [{path: '', component: CompanyListComponent, data: {key: "company"}},{path: ':companyID', component: CompanyDetailComponent},]}

More info here.

ANGULAR 13 (28/02/2022 VERSION)

after reading alot of guide and suggestion. I can explain this:

firstly,you must understand what are future and curr.

eg: when you navigate from localhost/a to localhost/b and now you are in b.

CASE 1: you want to go from /a -> /b

• shouldReuseRoute: false becase future !== current.
• shouldDetach: true because we will save (detach) anything in future to store and waiting to reuse(attach).
• shouldRetrieve: true || fase check the handler if yes we attach the saved future component to reuse. if no we do nothing. (in this case is no)

Case 2: you want go from /b?id=1 -> /b?id=2

• shouldReuseRoute: true because future === current;
• shouldDetach: skip
• shouldRetrieve: skip

case 3: you want go back from /b -> /a

• shouldReuseRoute: false becase future !== current.
• shouldDetach: true because we will save (detach) anything in future to store and waiting to reuse(attach).
• shouldRetrieve: true || fase check the handler if yes we attach the saved future component to reuse. if no we do nothing. (in this case is yes)

ok. more simple visual from https://stackoverflow.com/a/45788698/5748537

navigate to ashouldReuseRoute->return true->do nothinga->bshouldReuseRoute()->return false->shouldDetach()->return true->store athen b->ashouldReuseRoute()->return false->shouldDetach()->return true->store b->retrieve() return a ->attach() a.

then much more visual fromhttps://stackoverflow.com/a/69004775/5748537

and final the correct code from angular team: https://github.com/angular/angular/issues/44383

export class CustomRouteReuseStrategy implements RouteReuseStrategy { private handlers: Map<Route, DetachedRouteHandle> = new Map();constructor() {}public shouldDetach(_route: ActivatedRouteSnapshot): boolean {return true;}public store(route: ActivatedRouteSnapshot,handle: DetachedRouteHandle): void {if (!route.routeConfig) return;this.handlers.set(route.routeConfig, handle);}public shouldAttach(route: ActivatedRouteSnapshot): boolean {return !!route.routeConfig && !!this.handlers.get(route.routeConfig);}public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null {if (!route.routeConfig || !this.handlers.has(route.routeConfig)) return null;return this.handlers.get(route.routeConfig)!;}public shouldReuseRoute(future: ActivatedRouteSnapshot,curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}}

All mentioned solutions were somehow insufficient in our case. We have smaller business app with:

1. Introduction page
2. Login page
3. App (after login)

Our requirements:

1. Lazy-loaded modules
2. Multi-level routes
3. Store all router / component states in memory in app section
4. Option to use default angular reuse strategy on specific routes
5. Destroying all components stored in memory on logout

Simplified example of our routes:

const routes: Routes = [{path: '',children: [{path: '',canActivate: [CanActivate],loadChildren: () => import('./modules/dashboard/dashboard.module').then(module => module.DashboardModule)},{path: 'companies',canActivate: [CanActivate],loadChildren: () => import('./modules/company/company.module').then(module => module.CompanyModule)}]},{path: 'login',loadChildren: () => import('./modules/login/login.module').then(module => module.LoginModule),data: {defaultReuseStrategy: true, // Ignore our custom route strategyresetReuseStrategy: true // Logout redirect user to login and all data are destroyed}}];

Reuse strategy:

export class AppReuseStrategy implements RouteReuseStrategy {private handles: Map<string, DetachedRouteHandle> = new Map();// Asks if a snapshot from the current routing can be used for the future routing.public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}// Asks if a snapshot for the current route already has been stored.// Return true, if handles map contains the right snapshot and the router should re-attach this snapshot to the routing.public shouldAttach(route: ActivatedRouteSnapshot): boolean {if (this.shouldResetReuseStrategy(route)) {this.deactivateAllHandles();return false;}if (this.shouldIgnoreReuseStrategy(route)) {return false;}return this.handles.has(this.getKey(route));}// Load the snapshot from storage. It's only called, if the shouldAttach-method returned true.public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {return this.handles.get(this.getKey(route)) || null;}// Asks if the snapshot should be detached from the router.// That means that the router will no longer handle this snapshot after it has been stored by calling the store-method.public shouldDetach(route: ActivatedRouteSnapshot): boolean {return !this.shouldIgnoreReuseStrategy(route);}// After the router has asked by using the shouldDetach-method and it returned true, the store-method is called (not immediately but some time later).public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {if (!handle) {return;}this.handles.set(this.getKey(route), handle);}private shouldResetReuseStrategy(route: ActivatedRouteSnapshot): boolean {let snapshot: ActivatedRouteSnapshot = route;while (snapshot.children && snapshot.children.length) {snapshot = snapshot.children[0];}return snapshot.data && snapshot.data.resetReuseStrategy;}private shouldIgnoreReuseStrategy(route: ActivatedRouteSnapshot): boolean {return route.data && route.data.defaultReuseStrategy;}private deactivateAllHandles(): void {this.handles.forEach((handle: DetachedRouteHandle) => this.destroyComponent(handle));this.handles.clear();}private destroyComponent(handle: DetachedRouteHandle): void {const componentRef: ComponentRef<any> = handle['componentRef'];if (componentRef) {componentRef.destroy();}}private getKey(route: ActivatedRouteSnapshot): string {return route.pathFromRoot.map((snapshot: ActivatedRouteSnapshot) => snapshot.routeConfig ? snapshot.routeConfig.path : '').filter((path: string) => path.length > 0).join('');}}

the following is work! reference:https://www.cnblogs.com/lovesangel/p/7853364.html

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';export class CustomReuseStrategy implements RouteReuseStrategy {public static handlers: { [key: string]: DetachedRouteHandle } = {}private static waitDelete: stringpublic static deleteRouteSnapshot(name: string): void {if (CustomReuseStrategy.handlers[name]) {delete CustomReuseStrategy.handlers[name];} else {CustomReuseStrategy.waitDelete = name;}}public shouldDetach(route: ActivatedRouteSnapshot): boolean {return true;}public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {if (CustomReuseStrategy.waitDelete && CustomReuseStrategy.waitDelete == this.getRouteUrl(route)) {// 如果待删除是当前路由则不存储快照CustomReuseStrategy.waitDelete = nullreturn;}CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle}public shouldAttach(route: ActivatedRouteSnapshot): boolean {return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)]}/** 从缓存中获取快照，若无则返回nul */public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {if (!route.routeConfig) {return null}return CustomReuseStrategy.handlers[this.getRouteUrl(route)]}public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig &&JSON.stringify(future.params) === JSON.stringify(curr.params);}private getRouteUrl(route: ActivatedRouteSnapshot) {return route['_routerState'].url.replace(/\//g, '_')}}

I faced with these issues implementing a custom route reuse strategy:

1. Perform operations on a route attach/dettach: manage subscriptions, cleanup, etc.;
2. Preserve only the last parameterised route's state: memory optimisation;
3. Reuse a component, not a state: manage the state with a state-managment tools.
4. "Cannot reattach ActivatedRouteSnapshot created from a different route" error;

So I wrote a library solving these issues. The library provides a service and decorators for attach/detach hooks and uses a route's components to store detached routes, not a route's paths.

Example:

/* Usage with decorators */@onAttach()public onAttach(): void {// your code...}@onDetach()public onDetach(): void {// your code...}/* Usage with a service */public ngOnInit(): void {this.cacheRouteReuse.onAttach(HomeComponent) // or any route's component.subscribe(component => {// your code...});this.cacheRouteReuse.onDetach(HomeComponent) // or any route's component.subscribe(component => {// your code...});}

The library: https://www.npmjs.com/package/ng-cache-route-reuse

All the above answers are great but none of them will work properly if you have lazy-load router and that too nested ones.

To overcome that, shouldReuseRoute and path to compare the routes needs to be changed:

Path A: abc/xyx/3Path B: abc/rty/8<abc><router-outlet></router-outlet></abc>/* If we move from pathA to pathB or vice versa, * then `routeConfig` will be same since we are routing within the same abc, * but to store the handle properly, you should store fullPath as key.*/shouldReuseRoute(future: ActivatedRouteSnapshot,curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}private getPathFromRoot(route: ActivatedRouteSnapshot) {return (route["_urlSegment"]["segments"] as UrlSegment[]).map((seg) => seg.path).join("/");}