Question

我尝试使用这些说明实现RouteReuseStrategy How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2

我的重用策略.ts：

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


interface RouteStorageObject {
snapshot: ActivatedRouteSnapshot;
handle: DetachedRouteHandle;
}

export class CustomReuseStrategy implements RouteReuseStrategy {


storedRoutes: { [key: string]: RouteStorageObject } = {};


shouldDetach(route: ActivatedRouteSnapshot): boolean {
    let detach: boolean = true;
    console.log("detaching", route, "return: ", detach);
    return detach;
}

store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    let storedRoute: RouteStorageObject = {
        snapshot: route,
        handle: handle
    };

    console.log( "store:", storedRoute, "into: ", this.storedRoutes );
    // routes are stored by path - the key is the path name, and the handle is stored under it so that you can only ever have one object stored for a single path
    this.storedRoutes[route.routeConfig.path] = storedRoute;
}


shouldAttach(route: ActivatedRouteSnapshot): boolean {

    let canAttach: boolean = !!route.routeConfig && !!this.storedRoutes[route.routeConfig.path];


    if (canAttach) {
        let willAttach: boolean = true;
        console.log("param comparison:");
        console.log(this.compareObjects(route.params, this.storedRoutes[route.routeConfig.path].snapshot.params));
        console.log("query param comparison");
        console.log(this.compareObjects(route.queryParams, this.storedRoutes[route.routeConfig.path].snapshot.queryParams));

        let paramsMatch: boolean = this.compareObjects(route.params, this.storedRoutes[route.routeConfig.path].snapshot.params);
        let queryParamsMatch: boolean = this.compareObjects(route.queryParams, this.storedRoutes[route.routeConfig.path].snapshot.queryParams);

        console.log("deciding to attach...", route, "does it match?", this.storedRoutes[route.routeConfig.path].snapshot, "return: ", paramsMatch && queryParamsMatch);
        return paramsMatch && queryParamsMatch;
    } else {
        return false;
    }
}

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {

    // return null if the path does not have a routerConfig OR if there is no stored route for that routerConfig
    if (!route.routeConfig || !this.storedRoutes[route.routeConfig.path]) return null;
    console.log("retrieving", "return: ", this.storedRoutes[route.routeConfig.path]);

    return this.storedRoutes[route.routeConfig.path].handle;
}


shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    console.log("deciding to reuse", "future", future.routeConfig, "current", curr.routeConfig, "return: ", future.routeConfig === curr.routeConfig);
    return future.routeConfig === curr.routeConfig;
}


private compareObjects(base: any, compare: any): boolean {
    console.log("compareObjects")
    // loop through all properties in base object
    for (let baseProperty in base) {

        // determine if comparrison object has that property, if not: return false
        if (compare.hasOwnProperty(baseProperty)) {
            switch(typeof base[baseProperty]) {

                case 'object':
                    if ( typeof compare[baseProperty] !== 'object' || !this.compareObjects(base[baseProperty], compare[baseProperty]) ) { return false; } break;

                case 'function':
                    if ( typeof compare[baseProperty] !== 'function' || base[baseProperty].toString() !== compare[baseProperty].toString() ) { return false; } break;
                // otherwise, see if they are equal using coercive comparison
                default:
                    if ( base[baseProperty] != compare[baseProperty] ) { return false; }
            }
        } else {
            return false;
        }
    }

    // returns true only after false HAS NOT BEEN returned through all loops
    return true;
}

}

app.module.ts：

import { CustomReuseStrategy } from './reuse-strategy';

providers: [
    HttpService,
    CustomReuseStrategy
  ],

执行此操作后，没有任何更改，当我从访问另一个组件返回时，我仍然松开主页上的所有渲染数据（谷歌地图标记等）。没有显示来自reuse-strategy.ts的console.log消息。

我还需要配置什么吗？我对此非常陌生，请帮忙。

Answer 1

删除后它可以正常工作

implements RouteReuseStrategy

来自

export class CustomReuseStrategy implements RouteReuseStrategy {

因为它抛出错误类'CustomReuseStrategy'错误地实现了接口'RouteReuseStrategy'。替代解决方案是添加

ngRouteReuseStrategy() { }

另请参阅app.module.ts

providers: [
 {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
],

无法使Angular RouteReuseStrategy工作

1 个答案: