完善资料让更多小伙伴认识你,还能领取20积分哦, 立即完善>
|
|
相关推荐
1个回答
|
|
在Angular应用中,路由是大家耳熟能详的用来页面导航的技术。本文描述了Angular的路由复用策略以及如何自定义路由复用策略。
1 问题提出 在基于Angular的SPA应用中,应用通过路由在各个页面之间进行导航。 默认情况下,用户在离开一个页面时,这个页面(组件)会被Angular销毁,用户的输入信息也随之丢失,当用户再次进入这个页面时,看到的是一个新生成的页面(组件),之前的输入信息都没了。 配置的前端项目就是基于Angular的,工作中遇到了这样的问题,部分页面需要保存用户的输入信息,用户再次进入页面时需要回到上一次离开时的状态,部分页面每次都要刷新页面,不需要保存用户信息。而页面间的导航正是通过路由实现的,Angular的默认行为不能满足我们的需求! 2 解决思路 针对以上问题,通过查阅Angular的相关资料可以发现,Angular提供了RouteReuseStrategy接口,通过实现这个接口,可以让开发者自定义路由复用策略。 2.1 RouteReuseStrategy接口 我们先来看看RouteReuseStrategy的接口定义: 这个接口只定义了5个方法,每个方法的作用如下: shouldDetach 路由离开时是否需要保存页面,这是实现自定义路由复用策略最重要的一个方法。 其中: 返回值为true时,路由离开时保存页面信息,当路由再次激活时,会直接显示保存的页面。 返回值为false时,路由离开时直接销毁组件,当路由再次激活时,直接初始化为新页面。 store 如果shouldDetach方法返回true,会调用这个方法来保存页面。 shouldAttach 路由进入页面时是否有页面可以重用。 true: 重用页面,false:生成新的页面 retrieve 路由激活时获取保存的页面,如果返回null,则生成新页面 shouldReuseRout 决定跳转后是否可以使用跳转前的路由页面,即跳转前后跳转后使用相同的页面 2.2 默认的路由复用策略 Angular实现了一个默认的路由重用策略:DefaultRouteReuseStrategy,其实现如下: 在这个默认的路由复用策略中,只有当跳转前和跳转后的路由一致时,才会复用页面。只要跳转前和跳转后的路由不一致,页面就会被销毁。 有鉴于此,我们需要实现一个自定义的路由复用策略,实现针对不同的路由,能够有不同的行为。同时,也要能兼容现有代码,不能对现有代码做大规模的修改。 3 实践情况 3.1 自定义路由复用策略: 自定义路由复用策略实现如下: 在这个路由复用策略中,有两个关键点: 1.我们使用了一个handlers对象来保存页面。 2.通过路由配置的data对象中的reload属性来判断一个页面是否需要保存,并且只有reload属性为false时,才会保存页面。如果不配置reload属性,或者reload属性不为false,则不会保存页面。 3.2 配置路由重用策略为自定义策略 为了使用自定义的路由复用策略,需要在应用的根路由模块providers中使用自定义的路由复用策略。 3.3 配置路由 在路由配置中,按需配置路由的data属性。如需要保存页面,则设置reload值为false,如不需要保存页面,不配置该属性。例如: 此路由配置下,访问/foo页面始终会生成一个新的页面,而/bar页面会在路由离开时会被保存,再次进入该页面都会恢复到上一次离开该页面时的状态。 4 效果评价 在自定义了路由复用策略,并通过路由配置的data对象,可以和现有代码无缝集成,也不会对原有功能有触动,又大幅增强了原有的路由复用功能,完美解决了默认路由复用策略不足的问题 5 推广建议 在使用Angular路由的时候,路由激活时会自动生成组件的新实例,路由离开时会销毁组件实例,如果希望改变这种默认行为,就可以通过定制合适的路由复用策略来满足使用场景。同时,对路由的data属性的灵活使用,可以完美实现对现有代码的兼容。 |
|
|
|
只有小组成员才能发言,加入小组>>
物联网工程师必备:怎么选择不同的无线连接技术,本指南帮你忙!
3238 浏览 1 评论
【DFRobot TinkerNode NB-IoT 物联网开发板试用连载】WIFI功能测试
3888 浏览 0 评论
【DFRobot TinkerNode NB-IoT 物联网开发板试用连载】Arduino的替代SublimeText3+STino
3398 浏览 0 评论
使用端口扩展器轻松高效地向IIoT端点添加具有成本效益的子节点
3941 浏览 1 评论
20550 浏览 11 评论
模组有时候复位重启后输出日志为“REBOOT_CAUSE_SECURITY_PMU_POWER_ON_RESET”的原因?
692浏览 2评论
851浏览 2评论
912浏览 1评论
1036浏览 1评论
340浏览 1评论
小黑屋| 手机版| Archiver| 电子发烧友 ( 湘ICP备2023018690号 )
GMT+8, 2024-11-3 06:52 , Processed in 0.750292 second(s), Total 79, Slave 62 queries .
Powered by 电子发烧友网
© 2015 bbs.elecfans.com
关注我们的微信
下载发烧友APP
电子发烧友观察
版权所有 © 湖南华秋数字科技有限公司
电子发烧友 (电路图) 湘公网安备 43011202000918 号 电信与信息服务业务经营许可证:合字B2-20210191 工商网监 湘ICP备2023018690号