ng4里面 路由复用策略

ng4里面 路由复用策略

问题记录

请教一个问题：ng4里面 我用了路由复用策略，然后现在出现一个问题：比如我从列表界面，进入详情界面，能够满足比如从第三页进入详情回退的时候是在第三页（这里叫做快照的东东）这个算一个需求，另外一个操作是，我进入详情，对这条数据进行了操作，比如我把这个订单修改成已发货，但是回退上个界面的时候，列表数据，显示是未发货，这种问题，应该怎么去处理呢？

要注意的几个点：

路由快照是在离开页面时生成并存储(执行store方法)，因此从父路由到子路由也会触发store方法，这个时候想存储子路由的快照，需要在store方法里处理。

2.store方法在存储快照的时候，key值应该存当前路由路径（不管是父路由还是子路由），而不是存routes对象的data的key值，

相关的知识点：

ActivatedRouteSnapshot：包含当前插座中加载组件某一特定时间路由信息

RouteReuseStrategy：路由复用策略

DetachedRouteHandle：组件当前所有状态（路由快照import {ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle} from '@angular/routerexport class ExtensionRouteReuseStrategy implements RouteReuseStrategy {

private static waitDelete:string; public static storedRoutes: Map = new Map(); constructor(){}; //是否缓存[离开路由时触发] shouldDetach(route: ActivatedRouteSnapshot): boolean { return true; } //缓存组件[离开路由时触发] store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { if(this.waitDelete && this.waitDelete==this.getRouteUrl(route)){ this.waitDelete=null return; } this.storedRoutes.set(this.getRouteUrl(route), handle); } //是否还原[进入路由时触发] shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!this.storedRoutes.get(this.getRouteUrl(route)) } //还原路由[进入路由时触发] retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) { return null } return this.storedRoutes.get(this.getRouteUrl(route)) } //是否复用路由[进入路由时触发] shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { let result: boolean = future.routeConfig === curr.routeConfig; return result; } //拿到当前路由 private getRouteUrl(route: ActivatedRouteSnapshot){ return route['_routerState'].url } //删除快照 public static deleteRouteSnapshot(name:string):void{ if(this.storedRoutes.get(name)){ this.storedRoutes.delete(name); }else{ this.waitDelete=name; } }}

保存快照，代码的关键主要在sotre方法里。

在离开路由时保存快照，并emit一个事件给左边的菜单组件和右边的tab组件，告诉它们路由路径已改变，同时把新的路由路径作为参数传过去

然后在左边的菜单组件和右边的tab组件里subscribe事件里去监听变化，替换新的路由路径。

然后在路由复用策略的ts文件中的subscribe事件里去监听这个事件，然后执行对应路由的deleteRouteSnapshot()方法（删除快照的方法）

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。