IonicRouteStrategy和RouteReuseStrategy

Question

我希望用户浏览列表。转到详细信息页面时，返回列表后，页面仍停留在先前的位置。     我看不到任何实现ionic4的方法。     因此，我为Angular 6自定义了RouteReuseStrategy。     但这不起作用：     github：https://github.com/dhtzliu/DEMOHX

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
import { log } from 'util';

export class CustomReuseStrategy implements RouteReuseStrategy {
routesToCache: string[] = ['book'];
storedRouteHandles = new Map<string, DetachedRouteHandle>();


shouldDetach(route: ActivatedRouteSnapshot): boolean {
    console.log(route.routeConfig.path);
   return this.routesToCache.indexOf(route.routeConfig.path) > -1;
}


store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
   this.storedRouteHandles.set(route.routeConfig.path, handle);
}

shouldAttach(route: ActivatedRouteSnapshot): boolean {
return this.storedRouteHandles.has(route.routeConfig.path);
}


retrieve(route: ActivatedRouteSnapshot): Det`enter code here`achedRouteHandle {
   return this.storedRouteHandles.get(route.routeConfig.path);
}


shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
   return future.routeConfig === curr.routeConfig;
}
}



app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'book', loadChildren: './book/book.module#BookPageModule', 
     data: { key: 'book' } },
  { path: 'book-detail', loadChildren: './book-detail/book-
     detail.module#BookDetailPageModule', data: { key: 'bookdetail' } },
  { path: 'book-content', loadChildren: './book-content/book-
     content.module#BookContentPageModule' }
  ];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }



tab.page.html

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
  <ion-router-outlet name="home"></ion-router-outlet>
</ion-tab>
<ion-tab label="About" icon="information-circle" 
  href="/tabs/(about:about)">
  <ion-router-outlet name="about"></ion-router-outlet>
</ion-tab>
<ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
  <ion-router-outlet name="contact"></ion-router-outlet>
</ion-tab>
<ion-tab label="Book" icon="contacts" href="/tabs/(book:book)">
  <ion-router-outlet name="book"></ion-router-outlet>
</ion-tab>
</ion-tabs>




like this:

ERROR Error: Uncaught (in promise): Error: incompatible reuse strategy
Error: incompatible reuse strategy
at IonRouterOutlet.push../node_modules/@ionic/angular/dist/directives/navigation/ion-router-outlet.js.IonRouterOutlet.detach (ion-router-outlet.js:87)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.detachAndStoreRouteSubtree (router.js:3982)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.deactivateRouteAndItsChildren (router.js:3973)
at router.js:3993
at forEach (router.js:701)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.deactivateRouteAndOutlet (router.js:3993)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.deactivateRouteAndItsChildren (router.js:3976)
at router.js:3993
at forEach (router.js:701)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.deactivateRouteAndOutlet (router.js:3993)
at IonRouterOutlet.push../node_modules/@ionic/angular/dist/directives/navigation/ion-router-outlet.js.IonRouterOutlet.detach (ion-router-outlet.js:87)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.detachAndStoreRouteSubtree (router.js:3982)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.deactivateRouteAndItsChildren (router.js:3973)
at router.js:3993
at forEach (router.js:701)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.deactivateRouteAndOutlet (router.js:3993)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.deactivateRouteAndItsChildren (router.js:3976)
at router.js:3993
at forEach (router.js:701)
at ActivateRoutes.push../node_modules/@angular/router/fesm5/router.js.ActivateRoutes.deactivateRouteAndOutlet (router.js:3993)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3815)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595) -->