javascript - Angular RouterReuseStrategy, how to reuse only from specific routes? - Stack Overflow

admin管理员组

文章数量:1391925

I have RouterReuseStrategy in place for my application, that looks like below

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


export class CustomRouteReuseStrategy implements RouteReuseStrategy {

    private handlers: { [key: string]: DetachedRouteHandle } = {};

    /**
     * Determines if this route (and its subtree) should be detached to be reused later
     */
    shouldDetach(route: ActivatedRouteSnapshot): boolean {

        if (!route.routeConfig || route.routeConfig.loadChildren) {
            return false;
        }
        /** Whether this route should be re used or not */
        let shouldReuse = false;
        if (route.routeConfig.data) {
            route.routeConfig.data.reuse ? shouldReuse = true : shouldReuse = false;
        }
        //Check the from route and decide whether to reuse or not
        if(route.routeConfig.path == 'page1') {
            shouldReuse = false;
        } else {
            shouldReuse = true;
        }
        return shouldReuse;
    }

    /**
     * Stores the detached route.
     */
    store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
        console.log('[router-reuse] storing handler');
        if (handler) {
            this.handlers[this.getUrl(route)] = handler;
        }
    }

    /**
     * Determines if this route (and its subtree) should be reattached
     * @param route Stores the detached route.
     */
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!this.handlers[this.getUrl(route)];
    }

    /**
     * Retrieves the previously stored route
     */
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        if (!route.routeConfig || route.routeConfig.loadChildren) {
            return null;
        }

        return this.handlers[this.getUrl(route)];
    }

    /**
     * Determines if a route should be reused
     */
    shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
        /** We only want to reuse the route if the data of the route config contains a reuse true boolean */
        let reUseUrl = false;

        if (future.routeConfig) {
            if (future.routeConfig.data) {
                reUseUrl = future.routeConfig.data.reuse;
            }
        }

        /**
         * Default reuse strategy by angular assers based on the following condition
         * @see .4.6/packages/router/src/route_reuse_strategy.ts#L67
         */
        const defaultReuse = (future.routeConfig === current.routeConfig);

        // If either of our reuseUrl and default Url are true, we want to reuse the route
        //
        return reUseUrl || defaultReuse;
    }

    /**
     * Returns a url for the current route
     */
    getUrl(route: ActivatedRouteSnapshot): string {
        /** The url we are going to return */
        let next = route;
        // Since navigation is usually relative
        // we go down to find out the child to be shown.
        while (next.firstChild) {
          next = next.firstChild;
        }
        let segments = '';
        // Then build a unique key-path by going to the root.
        while (next) {
          segments += next.url.join('/');
          next = next.parent;
        }
        return segments;
    }
}

Route configuration in the module,

{ path: 'page1', ponent: Page1Component },
{ path: 'page2', ponent: Page2Component , data: {reuse: true}},
{ path: 'page3', ponent: Page3Component },

As seen reuse is set to true for page2 ponent, I want the reuse to work in page2 ponent only when I'm ing from page3 to page2 and not from page1 to page2

I have made changes in shouldDetach method to check the from route and decide whether to detach or not. But this doesn't seem to work. Am I missing anything?

I have RouterReuseStrategy in place for my application, that looks like below

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


export class CustomRouteReuseStrategy implements RouteReuseStrategy {

    private handlers: { [key: string]: DetachedRouteHandle } = {};

    /**
     * Determines if this route (and its subtree) should be detached to be reused later
     */
    shouldDetach(route: ActivatedRouteSnapshot): boolean {

        if (!route.routeConfig || route.routeConfig.loadChildren) {
            return false;
        }
        /** Whether this route should be re used or not */
        let shouldReuse = false;
        if (route.routeConfig.data) {
            route.routeConfig.data.reuse ? shouldReuse = true : shouldReuse = false;
        }
        //Check the from route and decide whether to reuse or not
        if(route.routeConfig.path == 'page1') {
            shouldReuse = false;
        } else {
            shouldReuse = true;
        }
        return shouldReuse;
    }

    /**
     * Stores the detached route.
     */
    store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
        console.log('[router-reuse] storing handler');
        if (handler) {
            this.handlers[this.getUrl(route)] = handler;
        }
    }

    /**
     * Determines if this route (and its subtree) should be reattached
     * @param route Stores the detached route.
     */
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!this.handlers[this.getUrl(route)];
    }

    /**
     * Retrieves the previously stored route
     */
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        if (!route.routeConfig || route.routeConfig.loadChildren) {
            return null;
        }

        return this.handlers[this.getUrl(route)];
    }

    /**
     * Determines if a route should be reused
     */
    shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
        /** We only want to reuse the route if the data of the route config contains a reuse true boolean */
        let reUseUrl = false;

        if (future.routeConfig) {
            if (future.routeConfig.data) {
                reUseUrl = future.routeConfig.data.reuse;
            }
        }

        /**
         * Default reuse strategy by angular assers based on the following condition
         * @see https://github./angular/angular/blob/4.4.6/packages/router/src/route_reuse_strategy.ts#L67
         */
        const defaultReuse = (future.routeConfig === current.routeConfig);

        // If either of our reuseUrl and default Url are true, we want to reuse the route
        //
        return reUseUrl || defaultReuse;
    }

    /**
     * Returns a url for the current route
     */
    getUrl(route: ActivatedRouteSnapshot): string {
        /** The url we are going to return */
        let next = route;
        // Since navigation is usually relative
        // we go down to find out the child to be shown.
        while (next.firstChild) {
          next = next.firstChild;
        }
        let segments = '';
        // Then build a unique key-path by going to the root.
        while (next) {
          segments += next.url.join('/');
          next = next.parent;
        }
        return segments;
    }
}

Route configuration in the module,

{ path: 'page1', ponent: Page1Component },
{ path: 'page2', ponent: Page2Component , data: {reuse: true}},
{ path: 'page3', ponent: Page3Component },

As seen reuse is set to true for page2 ponent, I want the reuse to work in page2 ponent only when I'm ing from page3 to page2 and not from page1 to page2

I have made changes in shouldDetach method to check the from route and decide whether to detach or not. But this doesn't seem to work. Am I missing anything?

• javascript
• angular

Share Improve this question Follow edited Feb 25, 2020 at 14:31 W Kristianto 9,33377 gold badges4848 silver badges7272 bronze badges asked Feb 25, 2020 at 13:28 Nikhil BharadwajNikhil Bharadwaj 91755 gold badges2626 silver badges5151 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

In my route reuse setup I have another field called reuseRoutesFrom. In my case I have a list and a detail so when navigating back to my list from a detail page I want to reuse the list, so for the list setup, I'll have something like this:

{
        path: '',
        ponent: ListComponent,
        data: {
            shouldReuseRoute: true,
            reuseRoutesFrom: ['Detail', 'Detail/:Id']
        }
    },

And in my route reuse strategy service I look at this in the should attach like this:

shouldAttach(route: ActivatedRouteSnapshot): boolean {

        var wasRoutePreviouslyDetached = !!this.handlers[route.url.join('/') || route.parent.url.join('/')];
        if (wasRoutePreviouslyDetached) {
            var reuseRouteFromVerified = route.data.reuseRoutesFrom.indexOf(this.routeLeftFrom) > -1;

            if (reuseRouteFromVerified) {

                return true;
            }
        }
        return false;
    }

When detaching, I cache the route that I left from as well to be used above:

    private routeLeftFrom: string;

    constructor() {}

    // Determines if this route (and its subtree) should be detached to be reused later.
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        // console.debug('CustomReuseStrategy:shouldDetach', route);
        this.routeLeftFrom = route.routeConfig.path;
        return route.data.shouldReuseRoute || false;
    }

本文标签： javascriptAngular RouterReuseStrategyhow to reuse only from specific routesStack Overflow