ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.1k stars 13.5k forks source link

IonicRouteStrategy #15688

Closed dhtzliu closed 6 years ago

dhtzliu commented 6 years ago

I want the user to browse the list. After going to the details page, after returning to the list, the page still stays in the previous position. I can't see any way ionic4 can be implemented. So I customized the RouteReuseStrategy for angular6. But he doesn't work.

//------------------------------------------------------start

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

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

    // Decides if the route should be stored
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.log(route.routeConfig.path);
       return this.routesToCache.indexOf(route.routeConfig.path) > -1;
    }

    // Store the information for the route we're destructing
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
       this.storedRouteHandles.set(route.routeConfig.path, handle);
    }

   // Return true if we have a stored route object for the next route
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
       return this.storedRouteHandles.has(route.routeConfig.path);
    }

    // If we returned true in shouldAttach(), now return the actual route data for restoration
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
       return this.storedRouteHandles.get(route.routeConfig.path);
    }

    // Reuse the route if we're going to and from the same route
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
       return future.routeConfig === curr.routeConfig;
    }
   }
//------------------------------------------------------end
//---------------------my routes
{ path: 'book', loadChildren: './book/book.module#BookPageModule', data: { key: 'book' } },
//----------------------end

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)
mhartington commented 6 years ago

Please update to Beta 12, this has already been fixed. Thanks

ionitron-bot[bot] commented 6 years ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.