Hello,
My issue is:
If i use with RouteReuseStrategy : IonicRouteStrategy, my visited pages remain well in the DOM.
But when I go back to one of these pages via a navCtrl.navigateForward(), the following pages of it are removed from the DOM. I would like them to always stay in the DOM for reuse it later.
I’ve already tried using the vanilla Angular routing with a CustomRouteStrategy but without success because it returns the error: incompatible reuse strategy.
I have already tried with the vanilla router-outlet tag but that does not work either.
My custom Strategy:
import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';
export class CustomRouteReuseStrategy extends RouteReuseStrategy {
private handlers: {[key: string]: DetachedRouteHandle} = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return !!route.data.reuse;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.handlers[route.url.join('/') || route.parent.url.join('/')] = handle;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!this.handlers[route.url.join('/')];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
return this.handlers[route.url.join('/') || route.parent.url.join('/')];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig || !!future.data.reuse;;
}
}
My AppModule:
@NgModule({
imports: [
...
AppRoutingModule
...
],
providers: [
{ provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
]
...
})
export class AppModule { }
My Router Module:
export const routes: Routes = [
{
path: '',
redirectTo: 'accueil',
pathMatch: 'full'
},
{
path: 'accueil',
loadChildren: () => import('./pages/accueil/accueil.module').then(m => m.AccueilPageModule)
},
{
path: 'plandesalle',
loadChildren: () => import('./pages/plandesalle/plandesalle.module').then(m => m.PlandesallePageModule),
canActivate: [AuthGuard],
data: {reuse: true}
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }
In addition, I would like to keep the advantages offered by the NavConcroller (ionViewWillEnter, ionViewDidLeave, …)
My question is:
Is it possible?
Than you for your responses.