Angular路由复用策略RouteReuseStrategy

第一步

新建RouteReuseStrategy

新建一个CustomReuseStrategy.ts 实现接口 RouteReuseStrategy

import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router'; export class CustomReuseStrategy implements RouteReuseStrategy { public static handlers: { [key: string]: DetachedRouteHandle } = {}; /** 删除缓存路由快照的方法 */ public static deleteRouteSnapshot(path: string): void { const name = path.replace(/\//g, '_'); if (CustomReuseStrategy.handlers[name]) { delete CustomReuseStrategy.handlers[name]; } } /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */ shouldDetach(route: ActivatedRouteSnapshot): boolean { // console.debug('shouldDetach======>', route);
　　　　return route.data.relad || false; // return true; } /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */ store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void { // console.debug('store======>', route, handle); CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle; } /** 若 path 在缓存中有的都认为允许还原路由 */ shouldAttach(route: ActivatedRouteSnapshot): boolean { // console.debug('shouldAttach======>', route); return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)]; } /** 从缓存中获取快照，若无则返回nul */ retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { // console.debug('retrieve======>', route); if (!CustomReuseStrategy.handlers[this.getRouteUrl(route)]) { return null; } return CustomReuseStrategy.handlers[this.getRouteUrl(route)]; } /** 进入路由触发，判断是否同一路由 */ shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean { // console.debug('shouldReuseRoute======>', future, curr); return future.routeConfig === curr.routeConfig && JSON.stringify(future.params) === JSON.stringify(curr.params); } /** 使用route的path作为快照的key */ getRouteUrl(route: ActivatedRouteSnapshot) { const path = route['_routerState'].url.replace(/\//g, '_'); return path; } }

第二步:
在app.module.ts进行注册

import { NgModule } from '@angular/core'; import { RouteReuseStrategy } from '@angular/router'; import { AppComponent } from './app.component'; import { CustomReuseStrategy } from './CustomReuseStrategy'; @NgModule({ declarations: [ AppComponent ], imports: [ // your imports ], providers: [ { provide: RouteReuseStrategy, useClass: CustomReuseStrategy } ], bootstrap: [AppComponent] }) export class AppModule { }

第三步：
const routes: Routes = [ ..., { path: 'class-list', component: ClassListPage, data: { reload: true } } ];

删除路由快照

import { Component, OnInit } from '@angular/core'; import { CustomReuseStrategy } from '../r'; @Component({ selector: 'tabpage', templateUrl: './tabpage.component.html', styleUrls: ['./tabpage.component.css'], providers: [CustomReuseStrategy] }) export class TodoComponent implements OnInit{ constructor() {} ngOnInit(): void {} changeTab() { // 删除快照 this.deleteRouteSnapshot(); // tab切换代码，路由跳转代码 // ... } /** 路由加载前可手动删除路由快照，切换路由则不会使用快照 */ deleteRouteSnapshot() { CustomReuseStrategy.deleteRouteSnapshot('/todolazy'); } }

参考文章

https://segmentfault.com/a/1190000015391814?utm_source=tag-newest

https://blog.csdn.net/lglspace/article/details/102983029