angular 路由复用策略

最近在弄单页面组件刷新功能的时候，接触到路由复用策略，总结下：
用法：

新建路由复用文件 SimpleReuseStrategy.ts:

import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
// import { compact } from 'rxjs';
import { ComponentRef } from '@angular/core';export class SimpleReuseStrategy implements RouteReuseStrategy {public static handlers: { [key: string]: DetachedRouteHandle } = {};private static getRouteUrl(route: ActivatedRouteSnapshot) {return route['_routerState'].url.replace(/[\/, -]/g, '_');}/** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */public shouldDetach(route: ActivatedRouteSnapshot): boolean {return !(!route.routeConfig || route.routeConfig.loadChildren);}/** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {SimpleReuseStrategy.handlers[SimpleReuseStrategy.getRouteUrl(route)] = handle;}/** 若 path 在缓存中有的都认为允许还原路由 */public shouldAttach(route: ActivatedRouteSnapshot): boolean {return !!route.routeConfig && !!SimpleReuseStrategy.handlers[SimpleReuseStrategy.getRouteUrl(route)];}/** 从缓存中获取快照，若无则返回nul */public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {if (!route.routeConfig || route.routeConfig.loadChildren) {return null;}// console.log(SimpleReuseStrategy.handlers);return SimpleReuseStrategy.handlers[SimpleReuseStrategy.getRouteUrl(route)];}/** 进入路由触发，判断是否同一路由 */public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}/** 清除缓存 */public clearCacheHandle(){for (const key in SimpleReuseStrategy.handlers) {if (SimpleReuseStrategy.handlers[key]){this.deactivateOutlet(SimpleReuseStrategy.handlers[key])}}}/** 处理同一组件不同链接的问题 */private deactivateOutlet(handle: DetachedRouteHandle): void {const componentRef: ComponentRef<any> = handle ? handle['componentRef'] : null;if (componentRef) {componentRef.destroy();}}public clearCacheByUrl(url: string){const handleUrl = url.replace(/[\/, -]/g, '_');for (const key in SimpleReuseStrategy.handlers) {if (key === handleUrl){delete SimpleReuseStrategy.handlers[key];}}}}

在AppModule中引入该文件：

@NgModule({declarations: [AppComponent],imports: [BrowserModule,BrowserAnimationsModule,HttpClientModule,DelonModule.forRoot(),CoreModule,SharedModule,LayoutModule,RoutesModule,...I18NSERVICE_MODULES,...GLOBAL_THIRD_MODULES,...FORM_MODULES,// ...MOCKMODULE,// TreeviewModule.forRoot(),],providers: [...LANG_PROVIDES, ...INTERCEPTOR_PROVIDES, ...I18NSERVICE_PROVIDES, ...APPINIT_PROVIDES, ApiService, LogService,// { provide: RouteReuseStrategy, useClass: ReuseTabStrategy, deps: [ ReuseTabService] },{ provide: RouteReuseStrategy, useClass: SimpleReuseStrategy },],bootstrap: [AppComponent],
})
export class AppModule {}

现在复用策略已经生效，这里主要说下配置过程中遇到的问题：
1、Cannot reattach ActivatedRouteSnapshot created from a different route
解决办法：
替换shouldDetach和retrieve方法如下（必须同时替换）：

/** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */public shouldDetach(route: ActivatedRouteSnapshot): boolean {if (!route.routeConfig || route.routeConfig.loadChildren) {return false;}return true;}
/** 从缓存中获取快照，若无则返回nul */public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {if (!route.routeConfig) {return null;}if(route.routeConfig.loadChildren) return null;return SimpleReuseStrategy.handlers[SimpleReuseStrategy.getRouteUrl(route)];}

2、路由复用策略中的store方法，必须是一下两种方式引起的路由跳转才会触发：
(1)：
(2)：由router类发起的路由跳转，如：router.navigate()或router.navigateByUrl等
如果是直接指令方式发起的则不会触发store方法，如：<app-dashboard *ngIf=“show”>

angular 路由复用策略相关推荐

Angular路由复用策略出现Cannot reattach ActivatedRouteSnapshot created from a different route错误
复用代码自己写的angular路由复用,用着基本挺好. 定义的的顺序就是复用的逻辑,离开某路由页面时,shouldDetach觉得可复用后,store去保存路由,再次进入页面时,shouldAtta ...
Angular6路由复用策略解读
本文除了介绍路由复用策略外,还实现了父子路由如何复用的问题,项目见末尾: 1.父路由和子路由页面的tab不应该同时存在,否则,切换时容易报以下错误: Cannot reattach Activated ...
NG RouteReuseStrategy(路由复用策略)
路由: 路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除: 路由的本质: Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系,当路由命中时利 ...
Ant Design Blazor 组件库的路由复用多标签页介绍
前言 Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 SignalR (WebSocket)构建前端应用程序,基于 WebAssembly 托管模型的 Blazor ...
Angular 路由
Angular 路由简单路由配置每个带路由的 Angular 应用都有一个Router(路由器)服务的单例对象. 当浏览器的 URL 变化时,路由器会查找对应的 Route(路由),并据此决定该显 ...
计算机网络最佳路由,优化计算机网络路由的策略
优化计算机网络路由的策略计算机网络技术的广泛应用为网络路由的发展带来新的机遇与挑战,对提高网络资源的应用效率具有重要意 (本文共2页) 阅读全文>> 随着移动互联网技术和多媒体应用的快速 ...
Angular 路由守卫
1. 路由 Angular路由: 可以控制页面跳转:可以在多视图间切换: 2. 路由守卫 Angular路由守卫: 在进入或离开某路由时,用于判断是否可以离开.进入某路由::: return true ...
NetScreen下“区域”与“路由”、“策略”基本概念
NetScreen下"区域"与"路由"."策略"基本概念 "区域"这个概念是NetScreen自己定的,它是很多NetS ...
angular 路由快照和 aggrid 结合后，导致aggrid 表头消失的问题
一,路由快照简述 1. angular的路由快照,简单的说,就是记录路由访问状态.比如当访问过A路由加载过A组件之后,再次访问A路由,A组件不会重新加载 (即不会重新渲染页面,不会重新请求接口). ...

angular 路由复用策略

angular 路由复用策略相关推荐

最新文章

热门文章