角度自定义RouteReuseStrategy检索方法失败，并显示错误：无法重新附加从其他路由创建的ActivatedRouteSnapshot

Question

我正在尝试在我的角度应用程序中实现类似制表符的功能。

为此，我创建了一个自定义Angular RouteReuseStrategy，并传递了查询参数以标识检索中的相应页面句柄。在同一基本页面之间切换但参数不同时，则检索方法失败。

例如，在员工页面上，我需要在员工SPA中切换一份以上的DetachedRouteHandle员工表格。

import * as rootStateSaveActions from '../../store/actions/rootStateSave.action';
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
import { Injectable, Injector } from '@angular/core';
import { Observable } from 'rxjs';
import { RouteTabs } from '../../store/models/pageTab.model';
import { Store } from '@ngrx/store';

@Injectable()
export class CustomReuseStrategy implements RouteReuseStrategy {
    savedRoutes$: Observable<RouteTabs>;
    RouteTabs: RouteTabs;

    constructor(private ngrxStore: Store<RouteTabs>, private injector: Injector) {
        this.savedRoutes$ = ngrxStore.select('saveState');
        this.savedRoutes$.subscribe((state) => {
            this.RouteTabs = state;
        });
    };

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

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        // call when leave the current route
        // TRUE will invoke store method
        // Determine if this route should be detached to be resued later
        return !!route.data && !!(route.data as any).shouldDetach;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        // store the detached route
        let pageNo: string = (route.queryParamMap.get('pageNo') == null) ? new Date().getUTCMilliseconds().toString() : route.queryParamMap.get('pageNo');
        this.handlers[pageNo] = handle;
        // ----------ngrx store used to save the page visited details
        let urlName: string = route.data.urlName;
        this.ngrxStore.dispatch(new rootStateSaveActions.CreateSaveRootState({
            // url: route.routeConfig.path,
            url: route.routeConfig.path,
            urlName: urlName,
            handle: null,
            unique: pageNo // used to identify minimized route handle.
        }))
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        // This method will call after component
        // Detremine if this route should be reattached
        // If return true "retrieve" method will call
        if (route.routeConfig) {
            return !!route.routeConfig && !!this.handlers[route.queryParamMap.get('pageNo')];
        }
        else {
            return false;
        }
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        // retrieve the previously stored route
        if (route.routeConfig) {
            let pageNo: string = route.queryParamMap.get('pageNo');
            if (this.handlers[pageNo] == undefined) {
                return null;
            }
            else {
                return this.handlers[pageNo];
            }
        }
        else {
            return null;
        }
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        // Determine if a route should be resued
        // if it return true routing will not happend
        if (curr.queryParamMap.get('pageNo') != null) {
            return false;
        }
        return future.routeConfig === curr.routeConfig;
    }
}

这将显示以下错误：

  

错误：无法重新附加从其他路由创建的ActivatedRouteSnapshot。