首页
视频
资源
登录
原
Angular路由复用策略 (切换tabs页面内容不丢失,保持原来状态)
7553
人阅读
2021/1/25 16:58
总访问:
287955
评论:
0
收藏:
0
手机
分类:
Angular
## 一、引言 tn> 路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除;当然在绝大多数场景下这是合理的。进入组件时会执行 ngOnInit() 里面的初始化方法,使页面保持最开始的状态。但有些需求需要切换页面的时候,再切换回来该页面时保持原来的状态。此时我们就需要 Angular 的RouteReuseStrategy 贯穿路由状态并决定构建组件的方式。 说白了就是标签页进行切换时表单各种内容不会被更新不被销毁! ![](https://img.tnblog.net/arcimg/Shangjin123/d275196a9444472a83097e95590b69c1.png) ## 二、RouteReuseStrategy tn> RouteReuseStrategy :路由复用策略,提供了几种办法通俗易懂的方法: shouldDetach 是否允许复用路由 store 当路由离开时会触发,存储路由 shouldAttach 是否允许还原路由 retrieve 获取存储路由 shouldReuseRoute 进入路由触发,是否同一路由时复用路由 ## 三、使用步骤 + 创建路由复用车略接口`SimpleReuseStrategy.ts`,直接赋值即可,如果有需求可自行改动: ```typescript import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router'; export class SimpleReuseStrategy implements RouteReuseStrategy { public static handlers: { [key: string]: DetachedRouteHandle } = {} /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */ public shouldDetach(route: ActivatedRouteSnapshot): boolean { return true; } /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */ public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { SimpleReuseStrategy.handlers[route.routeConfig.path] = handle } /** 若 path 在缓存中有的都认为允许还原路由 */ public shouldAttach(route: ActivatedRouteSnapshot): boolean { return !!route.routeConfig && !!SimpleReuseStrategy.handlers[route.routeConfig.path] } /** 从缓存中获取快照,若无则返回nul */ public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { if (!route.routeConfig) { return null } return SimpleReuseStrategy.handlers[route.routeConfig.path] } /** 进入路由触发,判断是否同一路由 */ public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { return future.routeConfig === curr.routeConfig } } ``` + 在app.module.ts中添加引入 ```typescript providers: [ //路由复用 { provide: RouteReuseStrategy, useClass: SimpleReuseStrategy } ], ``` + 这时候就可以使用了,可自己看效果!
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
是伍尚金哇_v
不帅~~但是很暖心.....
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
22篇
数据库
4篇
权限
2篇
前端移动端
2篇
接口相关
2篇
Redis
1篇
微信开发
1篇
ionic
11篇
Angular
9篇
前端
6篇
我的随笔
4篇
安卓开发
1篇
开发工具
3篇
GitHub
2篇
PHP
1篇
更多
硬件
1篇
工作笔记
3篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术