结论:

  结论放最上面,送给匆匆查资料的你:

  1. 同时使用延迟加载 + 路由复用,一定不能使用route.routeConfig.path做key去缓存,否则会死得难看。
  2. 经实测(我没有完全去解读源代码),将缓存的key改为下面的函数计算可行。
  private getRouteUrl(route: ActivatedRouteSnapshot) {
return route['_routerState'].url.replace(/\//g, '_')
+ '_' + (route.routeConfig.loadChildren || route.routeConfig.component.toString().split('(')[0].split(' ')[1] );
} 

  

基础版

关于angular2开始的路由复用网上教程很多,例如: https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx。

这个最初级的版本有一个问题:在延迟加载模式下,以route.couteConfig.path去做为缓存key是不可取的。经调试,path指的是配置在路由中的路由规则,不同模块有相同规则的机率相当在,比如每个模块可能都有 ' ' 做默认路由。

(这个版本挺有意思的,当时坑了我很久:从一个模块的默认路由跳到另一模块默认路由,由于path都是‘’,所以直接从缓存中把前一模块原来的缓存取了出来,导致看到的效果就是点了routerLink跳转没反应,也不报错。因为之前使用routerLink时记得要添加模块引用。好长时间,我以为是routerLink没有配置好,或者angular6升级了什么被遗漏了。根本就没有往路由上想!)

改进版

参考:https://www.cnblogs.com/lovesangel/p/7853364.html

这个版本意识到了上面的问题,采用用路由的url做路径,其实问题依然没解决,经调试还是会出现问题:

Uncaught Error: Uncaught (in promise): Error: Cannot reattach ActivatedRouteSnapshot created from a different route
Error: Cannot reattach ActivatedRouteSnapshot created from a different route
at setFutureSnapshotsOfActivatedRoutes (router.js:2267)
at createNode (router.js:2255)
at router.js:2294
at Array.map (<anonymous>)
at createOrReuseChildren (router.js:2278)
at createNode (router.js:2247)
at createRouterState (router.js:2239)
at MapSubscriber.project (router.js:4038)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:75)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
at setFutureSnapshotsOfActivatedRoutes (router.js:2267)

在参考了https://stackoverflow.com/questions/41584664/error-cannot-reattach-activatedroutesnapshot-created-from-a-different-route后,在retrive时加上

if (route.routeConfig.loadChildren) return null;

依然不能解决问题,基本调试如下:

这引起了我的注意,因为这两个组件的路由参数是一样的:

      path: '', component: ProjectDisplayComponent,
children: [
{
path: '', component: ProjectHomeComponent
},

shouldAttach方法也进了两次:

路由要复用,两个组件肯定都要进缓存的,用同样的key肯定会出问题的,于是在改进版上做修改如下:

  private getRouteUrl(route: ActivatedRouteSnapshot) {
return route['_routerState'].url.replace(/\//g, '_')
+ '_' + (route.routeConfig.loadChildren || route.routeConfig.component.toString().split('(')[0].split(' ')[1] );
}  

后面多出的一行代码:用于区分延迟加载时的模块路径,以及默认子组件与父组件。至此,问题解决(而且,可以去除 "if (route.routeConfig.loadChildren) return null"这一句。

经过测试:的确默认子组件及父组件都有缓存:

如果不加蓝色框线部分区分,存取难免出现冲突。

————————————————————————————————————————————————————————————————

礼尚往来,由于此文之前也参考了前面的人的改进方案,故传承改进,希望能帮到你。

Angular6路由复用与延迟加载的冲突解决——看看有备无患的更多相关文章

  1. (转)ViewPager,ScrollView 嵌套ViewPager滑动冲突解决

    ViewPager,ScrollView 嵌套ViewPager滑动冲突解决 本篇主要讲解一下几个问题 粗略地介绍一下View的事件分发机制 解决事件滑动冲突的思路及方法 ScrollView 里面嵌 ...

  2. RouteReuseStrategy angular路由复用策略详解,深度刨析路由复用策略

    关于前端路由复用策略网上的文章很多,大多是讲如何实现tab标签切换历史数据,至于如何复用的原理讲的都比较朦胧,代码样例也很难适用各种各样的路由配置,比如懒加载模式下多级嵌套路由出口网上的大部分代码都会 ...

  3. 用于实现tab页签切换页面的angular路由复用策略

    使用场景 打开菜单页面的时候,出现对应页面的页签.切换页签,原来的页面信息状态保留,关闭页签则保留的信息删除.使用路由复用策略,保存路由快照.实现效果如图所示 实现过程 概述: 1.在app.modu ...

  4. git冲突解决、线上分支合并、luffy项目后台登陆注册页面分析引入

    今日内容概要 git冲突解决 线上分支合并 登陆注册页面(引入) 手机号是否存在接口 腾讯云短信申请 内容详细 1.git冲突解决 1.1 多人在同一分支开发,出现冲突 # 先将前端项目也做上传到 g ...

  5. .Net中DLL冲突解决(真假美猴王)

    <西游记>中真假美猴王让人着实难以区分,但是我们熟知了其中的细节也不难把他们剥去表象分别出来.对问题不太关心的可以直接调到文中关于.Net文件版本的介绍 问题 最近在编译AKKA.net ...

  6. Git 分支管理和冲突解决

    Git 分支管理和冲突解决 创建分支 git branch 没有参数,显示本地版本库中所有的本地分支名称. 当前检出分支的前面会有星号. git branch newname 在当前检出分支上新建分支 ...

  7. Android Studio一些常用快捷键及快捷键冲突解决

    1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对的地方,希望大家 ...

  8. IIS上虚拟站点的web.config与主站点的web.config冲突解决方法 分类: ASP.NET 2015-06-15 14:07 60人阅读 评论(0) 收藏

    IIS上在主站点下搭建虚拟目录后,子站点中的<system.web>节点与主站点的<system.web>冲突解决方法: 在主站点的<system.web>上一级添 ...

  9. Git的冲突解决过程

    下面图是我总结一次提交遇到冲突解决的过程. 1. 把本地工作区的修改提交到本地仓库 2. 从远程仓库拉取代码,与本地仓库合并(pull = fetch + merge) 3. 本地仓库的代码推送回工作 ...

随机推荐

  1. P1129 [ZJOI2007]矩阵游戏(二分图,网络流)

    传送门 这推导过程真的有点可怕的说……完全想不出来…… 最终状态是$(1,1),(2,2),(3,3)...(n,n)$都有一个黑点 我们可以理解为每一个行和列都形成了一个匹配 换句话说,只要$n$行 ...

  2. cenos安装memcache

    注意事项: 1 安装时注意权限问题 sudo 2 需先启动memcache服务 php才能测试   Memcached是高性能的,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度 ...

  3. Python之路Python文件操作

    Python之路Python文件操作 一.文件的操作 文件句柄 = open('文件路径+文件名', '模式') 例子 f = open("test.txt","r&qu ...

  4. 搭建 docker + nginx + keepalived 实现Web应用的高可用(亲测)

    1. 环境准备     下载 VMware : https://www.vmware.com/go/getplayer-win        下载 Centos : https://mirrors.a ...

  5. winform跨线程问题(有参数和无参数)

    1.invoke是同步线程 using System; using System.Collections.Generic; using System.ComponentModel; using Sys ...

  6. js innerText、textContent、innerHTML的区别和各自用法

    //自定义函数 function my$(id) { return document.getElementById(id); } //点击按钮设置div中的文本内容 my$("btn&quo ...

  7. 【Leetcode】Divide Two Integers

    Divide two integers without using multiplication, division and mod operator. class Solution { public ...

  8. anaconda 换源

    2019.4.24更新: 清华源停止维护了(见:https://mirrors.tuna.tsinghua.edu.cn/news/close-anaconda-service/).以下方法不再适用. ...

  9. 洛谷 P2147 [SDOI2008]洞穴勘测 (线段树分治)

    题目链接 题解 早就想写线段树分治的题了. 对于每条边,它存在于一段时间 我们按时间来搞 我们可把一条边看做一条线段 我们可以模拟线段树操作,不断分治下去 把覆盖\(l-r\)这段时间的线段筛选出来, ...

  10. HDU 6301 (贪心+优先队列)

    题目大意: 求一个长度为n的数列, 给出m个区间,这m个区间各自区间内的数不同 题解: 用优先队列来模拟过程 , 解题思路是想到了 , 可是不知道如何实现 , 果然还须继续努力呀 这道题思路是去掉重复 ...