gpt4 book ai didi

Angular 2 实现 RouteReuseStrategy

转载 作者:太空狗 更新时间:2023-10-29 18:16:16 26 4
gpt4 key购买 nike

我实现了RouteReuseStrategy建议here并且还更新了一点,因为在 shouldAttachrouteConfig.path 是空的,处理程序没有被缓存。我有 @angular/router: 3.4.7

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

export class CustomReuseStrategy implements RouteReuseStrategy {

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

shouldDetach(route: ActivatedRouteSnapshot): boolean {
return true
}

store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.handlers[route.routeConfig.path] = handle
}

shouldAttach(route: ActivatedRouteSnapshot): boolean {
// todo route.routeConfig.path was empty
if (!!this.currentPath && !!this.handlers[this.currentPath]) {
route.routeConfig.path = this.currentPath;
return true
} else {
return false
}
}

retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
if (!route.routeConfig) return null;
return this.handlers[route.routeConfig.path]
}

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
this.currentPath = curr.routeConfig && curr.routeConfig.path;

return future.routeConfig === curr.routeConfig
}

deleteHandler(handler:string) {
this.handlers[handler] && delete this.handlers[handler]
}

}

一切正常,除了当我第三次尝试导航回路线时出现以下错误:

EXCEPTION: Uncaught (in promise): Error: Cannot reattach ActivatedRouteSnapshot with a different number of children
Error: Cannot reattach ActivatedRouteSnapshot with a different number of children
at setFutureSnapshotsOfActivatedRoutes (http://localhost:4200/js/vendor.bundle.js:93110:15) [angular]
at createNode (http://localhost:4200/js/vendor.bundle.js:93091:9) [angular]
at http://localhost:4200/js/vendor.bundle.js:93131:16 [angular]
at Array.map (native) [angular]
at createOrReuseChildren (http://localhost:4200/js/vendor.bundle.js:93124:26) [angular]
at createNode (http://localhost:4200/js/vendor.bundle.js:93086:41) [angular]
at http://localhost:4200/js/vendor.bundle.js:93128:24 [angular]
at Array.map (native) [angular]
at createOrReuseChildren (http://localhost:4200/js/vendor.bundle.js:93124:26) [angular]
at createNode (http://localhost:4200/js/vendor.bundle.js:93086:41) [angular]
at createRouterState (http://localhost:4200/js/vendor.bundle.js:93072:33) [angular]
at MapSubscriber.project (http://localhost:4200/js/vendor.bundle.js:26366:153) [angular]
at MapSubscriber._next (http://localhost:4200/js/vendor.bundle.js:15890:35) [angular]
at MapSubscriber.Subscriber.next (http://localhost:4200/js/vendor.bundle.js:4861:18) [angular]
at MergeMapSubscriber.notifyNext (http://localhost:4200/js/vendor.bundle.js:19133:30) [angular]
at InnerSubscriber._next (http://localhost:4200/js/vendor.bundle.js:106234:21) [angular]
at InnerSubscriber.Subscriber.next (http://localhost:4200/js/vendor.bundle.js:4861:18) [angular]
at MapSubscriber._next (http://localhost:4200/js/vendor.bundle.js:15896:26) [angular]
at MapSubscriber.Subscriber.next (http://localhost:4200/js/vendor.bundle.js:4861:18) [angular]
at ReduceSubscriber._complete (http://localhost:4200/js/vendor.bundle.js:36808:30) [angular]
at ReduceSubscriber.Subscriber.complete (http://localhost:4200/js/vendor.bundle.js:4886:18) [angular]
at MergeMapSubscriber._complete (http://localhost:4200/js/vendor.bundle.js:19125:30) [angular]
at MergeMapSubscriber.Subscriber.complete (http://localhost:4200/js/vendor.bundle.js:4886:18) [angular]
at ArrayObservable._subscribe (http://localhost:4200/js/vendor.bundle.js:12465:24) [angular]
at ArrayObservable.Observable._trySubscribe (http://localhost:4200/js/vendor.bundle.js:221:25) [angular]
at ArrayObservable.Observable.subscribe (http://localhost:4200/js/vendor.bundle.js:209:27) [angular]
at MergeMapOperator.call (http://localhost:4200/js/vendor.bundle.js:19075:23) [angular]
at Observable.subscribe (http://localhost:4200/js/vendor.bundle.js:206:22) [angular]
at ReduceOperator.call (http://localhost:4200/js/vendor.bundle.js:36763:23) [angular]
at Observable.subscribe (http://localhost:4200/js/vendor.bundle.js:206:22) [angular]
at MapOperator.call (http://localhost:4200/js/vendor.bundle.js:15867:23) [angular]
at Observable.subscribe (http://localhost:4200/js/vendor.bundle.js:206:22) [angular]
at Object.subscribeToResult (http://localhost:4200/js/vendor.bundle.js:5096:27) [angular]
...

最佳答案

我有同样的问题,并且在过去一周一直在尝试。看起来它现在对我来说很好用。 主要挑战是为任何给定路由定义唯一键。当您使用子路由和延迟加载配置您的应用程序时,我发现 RouteReuseStrategy 变得有点复杂,无法理解和定义每个路由的键。我尝试解释我的理解,希望这些信息对您有所帮助。

RouteReuseStrategy
我试图找出 RouteReuseStrategy 方法调用和参数详细信息以生成唯一 key ,并通过调试我的应用程序得出下图。注意到有时阶段参数传递给方法调用并尝试在 RouteReuseStrategy 实现中忽略这些参数。

RouteReuseStrategy Method Call Details

自定义重用策略

RouteReuseStrategy 实现:

/* tslint:disable */
import {ActivatedRouteSnapshot, DetachedRouteHandle, Params, RouteReuseStrategy} from "@angular/router";

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

export class CustomReuseStrategy implements RouteReuseStrategy {
storedRoutes: { [key: string]: RouteStorageObject } = {};

getFurthestDecendantParams(route: ActivatedRouteSnapshot, sum: any): ActivatedRouteSnapshot {
if (route.children.length > 0) {
let child: ActivatedRouteSnapshot = route.children[0];
sum.sum = sum.sum + this.sumParams(child.params);
return this.getFurthestDecendantParams(child, sum);
}
return route;
}

sumParams(params: Params): string {
return Object.keys(params).reduce((param, key) => {
return param + params[key];
}, "");
}

calcKey(route: ActivatedRouteSnapshot) {
let paramKey = {
sum: ""
}
if (route.children.length > 0) {
this.getFurthestDecendantParams(route, paramKey).params;
} else {
paramKey.sum = this.sumParams(route.params);
}
if (paramKey.sum != "") {
paramKey.sum = "_" + paramKey.sum;
}
return route.data.key + paramKey.sum;
}

public shouldDetach(route: ActivatedRouteSnapshot): boolean {
console.info("CustomReuseStrategy.shouldDetach() - route key: " + this.calcKey(route));
return !("product" === this.calcKey(route));
}


public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
let storedRoute: RouteStorageObject = {
snapshot: route,
handle: handle
};
console.info("CustomReuseStrategy.store() - route key: " + this.calcKey(route));
this.storedRoutes[this.calcKey(route)] = storedRoute;
}


public shouldAttach(route: ActivatedRouteSnapshot): boolean {
console.info("CustomReuseStrategy.shouldAttach() - route key: " + this.calcKey(route));
return this.storedRoutes[this.calcKey(route)] !== undefined;
}

public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
console.info("CustomReuseStrategy.retrieve() - route key: " + this.calcKey(route));
if (this.storedRoutes[this.calcKey(route)] === undefined) {
/* Just return undefined */
return null;
} else {
return this.storedRoutes[this.calcKey(route)].handle;
}
}


public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
let returnValue = (future.routeConfig === curr.routeConfig);
if (future.routeConfig != null && curr.routeConfig != null) {
returnValue = this.calcKey(future) === this.calcKey(curr);
console.info("CustomReuseStrategy.shouldReuseRoute() - future: " + this.calcKey(future) + ", curr: " + this.calcKey(curr) +
", future.routeConfig.path:" + future.routeConfig.path + ", curr.routeConfig.path:" + curr.routeConfig.path + ", returnValue: " + returnValue);
} else {
console.info("CustomReuseStrategy.shouldReuseRoute() - future: " + this.calcKey(future) + ", curr: " + this.calcKey(curr) +
", future.routeConfig:" + future.routeConfig + ", curr.routeConfig:" + curr.routeConfig + ", returnValue: " + returnValue);
}
return returnValue;
}
}

总结

在我的应用程序中定义了以下内容,RouteReuseStrategy 工作正常。

  • 使用数据键和子延迟加载定义路由
  • 只有一个路由导出
  • 每条路线的唯一键
  • Angular 版本 2.4.10 和 Router 版本 3.4.10

引用

关于Angular 2 实现 RouteReuseStrategy,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42643748/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com