Issue
I have several routes to the same component (namely /projects, /projects/create, /projects/:id and children, all pointing to my ProjectComponent).
When navigating between /projects/:id with only :id changing everything is fine, I can subscribe to the params and update my content accordingly, but when I navigate from /projects to /projects/create or to /projects/:id, the component is recreated.
Is there any way to navigate to a route pointing to the same component without it being recreated ?
Solution
You should implement a custom RouteReuseStrategy
Create a service implementing the RouteReuseStrategy
:
export class CustomReuseStrategy implements RouteReuseStrategy {
handlers: {[key: string]: DetachedRouteHandle} = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return true;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.handlers[route.routeConfig.path] = handle;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
if (!route.routeConfig) return null;
return this.handlers[route.routeConfig.path];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
}
And add this provider to the @NgModule
:
providers: [
{provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
]
You can adjust the CustomReuseStrategy
to only have certain paths where the component can be reused, but I’ll leave that up to you to find out how.
Answered By – Poul Kruijt
Answer Checked By – Mildred Charles (AngularFixing Admin)