I want to use this custom route reuse strategy for just one module:
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 true;
}
}
So I've passed into @NgModule() in one of my modules named ChildModule
:
providers: [
{
provide: RouteReuseStrategy,
useClass: CustomRouteReuseStrategy
}
]
Unfortunately, when I pass it there it simply gets ignored. Although works fine when added to my root AppModule
... I'm not sure if it matters, but ChildModule
is lazily loaded. How to solve it?
RouteReuseStrategy interface defines 5 methods: shouldReuseRoute This method is called everytime we navigate between routes. The future is the route we are leaving (not sure why is called future) and curr is the route we are landing.
Custom Route Reuse StrategyshouldDetach: Determines if this route (and its subtree) should be detached to be reused later. store: Stores the detached route. shouldAttach: Determines if this route (and its subtree) should be reattached. retrieve: Retrieves the previously stored route.
RunGuardsAndResolverslink type-alias. A policy for when to run guards and resolvers on a route.
ActivatedRouteSnapshotlinkContains the information about a route associated with a component loaded in an outlet at a particular moment in time. ActivatedRouteSnapshot can also be used to traverse the router state tree.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With