I’m trying to block the RouteReuseStrategy based on some conditions but this is not happening. I’ve a route name as comp-a which is called in two different ways. 1 time is from a back button and the other time from a button in header.
Case 1:
If there’s something happened in Component A and then user goes to Component B and there the user clicks on back button the data should persist in Component A. This case is achieved perfectly by using RouteReuseStrategy.
Case 2:
If there’s something happened in Component A and then user goes to Component B and there the user clicks on the button from header then when the user lands on Component A, the page should load from start i.e. ngOnInit() should get called.
My issue is for the Case 2 which is not working.
I tried to pass data in the route and access it from ActivatedRouteSnapshot in the shouldDetach() function but this is not helping. I took reference from here.
In app-routing.module.ts,
const route: Routes = [
{ path: 'comp-a', component: CompAComponent, data: { test: true } }
];
In app.component.ts
// Click event on "Goto Comp A from Comp B" button
navigate() {
this.router.navigate(['../comp-a'], { state: { data: { test: false } } });
}
In custom-reuse-strategy.ts,
shouldDetach(route: ActivatedRouteSnapshot) {
return route.routeConfig?.path === 'comp-a' && (route.data as any)?.test; // I've accessed "test" variable here
}
I’ve tried this in this stackblitz example.
In the above example, the button Goto Comp A from Comp B is for the Case 2 example and the button Go to Comp B is for Case 1.
How should I modify the route-reuse code or is there any other way to achieve this?
Yes, It should be achieved, but just with some modifications in the stackblitz example.
In app-routing.module.ts
const routes: Routes = [
{ path: 'comp-a', component: CompAComponent, data: { test: true } },
{ path: 'comp-b', component: CompBComponent },
];
In app.component.ts
navigateFromHeader() {
this.router.navigate(['comp-a'], { state: { fromHeader: true } });
}
navigateFromBack() {
this.router.navigate(['comp-a'], { state: { fromHeader: false } });
}
In custom-reuse-strategy.ts,
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route.data?.test || false;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
const fromHeader = history.state?.fromHeader;
if (fromHeader) {
this.storedRoutes[route.routeConfig?.path || ''] = null;
return false;
} else {
return !!this.storedRoutes[route.routeConfig?.path || ''];
}
}
Vaibhav Gupta is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1