Angular RouterReuseStrategy, как повторно использовать только из указанных c маршрутов?

Question

У меня есть RouterReuseStrategy для моего приложения, которое выглядит следующим образом

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.com/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;
    }
}

Конфигурация маршрута в модуле,

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

Как видно, повторное использование установлено в true для Компонент page2, я хочу, чтобы повторное использование работало в компоненте page2, только когда я перехожу со страницы 3 на page2 и не с page1 на page2

Я внес изменения в метод shouldDetach, чтобы проверить маршрут от маршрута и решить, следует ли отсоединяться или нет. Но это не похоже на работу. Я что-то упустил?

Answer 1

В моей настройке повторного использования маршрута у меня есть другое поле, называемое reuseRoutesFrom. В моем случае у меня есть список и подробности, поэтому при переходе назад к списку со страницы подробностей я хочу использовать список повторно, поэтому для настройки списка у меня будет что-то вроде этого:

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

И в моем сервисе стратегии повторного использования маршрута я смотрю на это в прикрепленном файле следующим образом:

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;
    }

При отсоединении я кеширую также маршрут, с которого я ушел, для использования выше:

    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;
    }