Angular路由复用策略的方法
一、引言
路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除;当然在绝大多数场景下这是合理的。
但有时一些特殊需求会让人半死亡状态,当然这一切都是为了用户体验;一种非常常见场景,在移动端中用户通过关键词搜索商品,而死不死的这样的列表通常都会是自动下一页动作,此时用户好不容易滚动到第二页并找到想要看的商品时,路由至商品详情页,然后一个后退……用户懵逼了。
Angular路由与组件一开始就透过 RouterModule.forRoot
形成一种关系,当路由命中时利用 ComponentFactoryResolver
构建组件,这是路由的本质。
而每一个路由并不一定是一次性消费,Angular 利用 RouteReuseStrategy
贯穿路由状态并决定构建组件的方式;当然默认情况下(DefaultRouteReuseStrategy)像开头说的,一切都不进行任何处理。
RouteReuseStrategy
从2就已经是实验性,当前依然如此,这么久应该是可信任。
二、RouteReuseStrategy
RouteReuseStrategy
我称它为:路由复用策略;并不复杂,提供了几种办法通俗易懂的方法:
shouldDetach
是否允许复用路由store
当路由离开时会触发,存储路由shouldAttach
是否允许还原路由retrieve
获取存储路由shouldReuseRoute
进入路由触发,是否同一路由时复用路由
这看起来就像是一个时间轴关系,用一种白话文像是这样:把路由 /list
设置为允许复用(shouldDetach
),然后将路由快照存在 store
当中;当 shouldReuseRoute
成立时即:再次遇到 /list
路由后表示需要复用路由,先判断 shouldAttach
是否允许还原,最后从 retrieve
拿到路由快照并构建组件。
当理解这一原理时,假如我们拿开头搜索列表返回的问题就变得非常容易解决。
三、一个示例
诚如上面说明的,只需要实现 RouteReuseStrategy
接口即可自定义一个路由利用策略。
1、创建策略
import {RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle} from '@angular/router'; export class SimpleReuseStrategy implements RouteReuseStrategy { _cacheRouters: { [key: string]: any } = {}; shouldDetach(route: ActivatedRouteSnapshot): boolean { return true; } store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { this._cacheRouters[route.routeConfig.path] = { snapshot: route, handle: handle }; } shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!this._cacheRouters[route.routeConfig.path]; } retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return this._cacheRouters[route.routeConfig.path].handle; } shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return future.routeConfig === curr.routeConfig; } }
定义一个 _cacheRouters
用于缓存数据(路由快照及当前组件实例对象)。
shouldDetach
直接返回true
表示对所有路由允许复用store
当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象;path等同RouterModule.forRoot中的配置。shouldAttach
若path
在缓存中有的都认为允许还原路由retrieve
从缓存中获取快照,若无则返回nullshouldReuseRoute
进入路由触发,判断是否同一路由
2、注册
最后将策略注册到模块当中:
providers: [ { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy } ]
假设我们有这么一个路由配置:
RouterModule.forRoot([ { path: 'search', component: SearchComponent }, { path: 'edit/:id', component: EditComponent } ])
搜索组件用于搜索动作,并在根据搜索结果跳转至编辑页,保存后又回到最后搜索结果的状态(这部分代码我就不贴有兴趣见 plnkr)。
四、结论
上述只是一个简单的抛砖引玉作用,实则对于复用的判断会更复杂、滚动条位置、缓存清理等等。
善用这种路由复用策略机制可以解决很多Web体验上的问题。
以上是Angular路由复用策略的方法的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

番茄小说是一款非常热门的小说阅读软件,我们在番茄小说中经常会有新的小说和漫画可以去阅读,每一本小说和漫画都很有意思,很多小伙伴也想着要去写小说来赚取赚取零花钱,在把自己想要写的小说内容编辑成文字,那么我们要怎么样在这里面去写小说呢?小伙伴们都不知道,那就让我们一起到本站本站中花点时间来看写小说的方法介绍吧。分享番茄小说写小说方法教程 1、首先在手机上打开番茄免费小说app,点击个人中心——作家中心 2、跳转到番茄作家助手页面——点击创建新书在小说的结

微信是主流的聊天工具之一,我们可以通过微信认识新的朋友,联系老的朋友,维系朋友之间的情谊。正如天下没有不散的宴席,人与人之间的相处难免会发生意见不合的时候。当一个人极其影响你的情绪,或者在相处的时候发现三观不合,没办法再继续沟通,那么我们可能需要删除微信好友的方法。怎么删除微信好友?删除微信好友的方法第一步:在微信主界面轻触【通讯录】;第二步:点击对应要删除的好友,进入【详细资料】;第三步:点击右上角【...】;第四步:点击下方【删除】即可;第五步:了解后页面提示后,点击【删除联系人】即可;温馨

七彩虹主板在中国国内市场享有较高的知名度和市场占有率,但是有些七彩虹主板的用户还不清楚怎么进入bios进行设置呢?针对这一情况,小编专门为大家带来了两种进入七彩虹主板bios的方法,快来试试吧! 方法一:使用u盘启动快捷键直接进入u盘装系统 七彩虹主板一键启动u盘的快捷键是ESC或F11,首先使用黑鲨装机大师制作一个黑鲨U盘启动盘,然后开启电脑,当看到开机画面的时候,连续按下键盘上的ESC或F11键以后将会进入到一个启动项顺序选择的窗口,将光标移动到显示“USB”的地方,然

而后悔莫及、人们常常会因为一些原因不小心将某些联系人删除、微信作为一款广泛使用的社交软件。帮助用户解决这一问题,本文将介绍如何通过简单的方法找回被删除的联系人。1.了解微信联系人删除机制这为我们找回被删除的联系人提供了可能性、微信中的联系人删除机制是将其从通讯录中移除,但并未完全删除。2.使用微信内置“通讯录恢复”功能微信提供了“通讯录恢复”节省时间和精力,用户可以通过该功能快速找回之前被删除的联系人,功能。3.进入微信设置页面点击右下角,打开微信应用“我”再点击右上角设置图标、进入设置页面,,

Win11管理员权限获取方法汇总在Windows11操作系统中,管理员权限是非常重要的权限之一,可以让用户对系统进行各种操作。有时候,我们可能需要获取管理员权限来完成一些操作,比如安装软件、修改系统设置等。下面就为大家总结了一些获取Win11管理员权限的方法,希望能帮助到大家。1.使用快捷键在Windows11系统中,可以通过快捷键的方式快速打开命令提

在当今社会,手机已经成为我们生活中不可或缺的一部分。而微信作为我们日常沟通、工作、生活的重要工具,更是经常被使用。然而,在处理不同事务时可能需要分开两个微信账号,这就要求手机能够支持同时登录两个微信账号。华为手机作为国内知名品牌,很多人使用,那么华为手机开启两个微信账号的方法是怎样的呢?下面就来揭秘一下这个方法。首先,要在华为手机上同时使用两个微信账号,最简

Angular.js是一种可自由访问的JavaScript平台,用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言,以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具,可帮助您编写、更新和测试代码。此外,它还提供了许多功能,如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先,您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境,可让您在服务器端运行JavaScript代码。要在Ub

手机游戏成为了人们生活中不可或缺的一部分,随着科技的发展。它以其可爱的龙蛋形象和有趣的孵化过程吸引了众多玩家的关注,而其中一款备受瞩目的游戏就是手机版龙蛋。帮助玩家们在游戏中更好地培养和成长自己的小龙,本文将向大家介绍手机版龙蛋的孵化方法。1.选择合适的龙蛋种类玩家需要仔细选择自己喜欢并且适合自己的龙蛋种类,根据游戏中提供的不同种类的龙蛋属性和能力。2.提升孵化机的等级玩家需要通过完成任务和收集道具来提升孵化机的等级,孵化机的等级决定了孵化速度和孵化成功率。3.收集孵化所需的资源玩家需要在游戏中
