Custom RouteReuseStrategy for Angular's child module
I finally achieved it by passing a bit modified CustomRouteStrategy to AppModule:
export class CustomRouteReuseStrategy extends RouteReuseStrategy {
public shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
public shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; }
public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return (future.routeConfig === curr.routeConfig) || future.data.reuse;
}
}
And adding data: { reuse: true } to the routing of lazily loaded ChildModule:
{
path: 'some-path',
data: { reuse: true },
loadChildren: './child.module#ChildModule',
},
Demo with more advanced solution
CUSTOM ROUTE STRATEGY
import {RouteReuseStrategy,DetachedRouteHandle,ActivatedRouteSnapshot} from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
public static handlers: { [key: string]: DetachedRouteHandle } = {}
private static delete: string
//THIS METHOD IS USED FOR DELETE ROUTE
public static deleteRouteSnapshot(name: string): void {
if (CustomReuseStrategy.handlers[name]) {
delete CustomReuseStrategy.handlers[name];
} else {
CustomReuseStrategy.delete = name;
}
}
//THIS METHOD RETURN TRUE WHEN ROUTE REUSE LATER
public shouldDetach(route: ActivatedRouteSnapshot): boolean {
return true;
}
//THIS METHOD IS USD FOR STORE ROUTE STATE
public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
if (CustomReuseStrategy.delete && CustomReuseStrategy.delete == this.getRouteUrl(route)) {
CustomReuseStrategy.delete = null
return;
}
CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
}
//ATTACHED ROUTE IF ALREADY NOT PRESENT
public shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)];
}
//THIS METHOD IS USED FOR RETRIEVING ROUTE STATE
public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
if (!route.routeConfig) {
return null
}
return CustomReuseStrategy.handlers[this.getRouteUrl(route)];
}
//THIS METHOD RUN WHEN USER CHANGE ROUTE EVEY TIME AND CHECK CURRENT ROUTE WANT TO USED CUSTOM STRATEGY OR NOT
public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig &&
JSON.stringify(future.params) === JSON.stringify(curr.params);
}
//FIND OUT ACTUAL ROUTE NAME AND ROUTE THE URL
private getRouteUrl(route: ActivatedRouteSnapshot) {
return route['_routerState'].url.replace(/\//g, '_')
}
}