Angular路由跳转返回后冻结组件 保留状态避免重复加载

Angular 默认路由逻辑下，组件从路由离开时会被直接销毁，返回时会重新实例化，必然重新执行ngOnInit在内的完整生命周期。你之前用localStorage存状态只解决了变量值留存的问题，没有解决组件重建、重新加载数据、重新渲染的问题，所以达不到冻结状态的效果。

用Angular原生提供的RouteReuseStrategy做路由复用，配置后目标组件离开时不会被销毁，返回时直接挂载原有实例，ag-grid的滚动位置、筛选条件、选中行、侧边栏展开状态、分页位置所有交互状态会100%留存，第一次访问正常初始化，后续返回完全不触发重载，不需要手动维护任何状态存储逻辑。

• 第一步：编写自定义路由复用策略

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable()
export class AgGridCacheRouteStrategy implements RouteReuseStrategy {
  private cacheMap = new Map<string, DetachedRouteHandle>();

  // 配置需要缓存的路由路径，替换成你自己的ag-grid组件对应路由
  private readonly cacheRoutePaths = ['your-account-grid-route'];

  // 离开路由时判断是否需要缓存
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    const path = route.routeConfig?.path || '';
    return this.cacheRoutePaths.includes(path);
  }

  // 存储需要缓存的组件实例
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
    const path = route.routeConfig?.path || '';
    if (handle && this.cacheRoutePaths.includes(path)) {
      this.cacheMap.set(path, handle);
    }
  }

  // 返回路由时判断是否有可用缓存
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const path = route.routeConfig?.path || '';
    return !!route.routeConfig && this.cacheMap.has(path);
  }

  // 读取缓存实例挂载
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const path = route.routeConfig?.path || '';
    return this.cacheMap.get(path) || null;
  }

  // 同路由参数变化时的复用逻辑，常规场景默认配置即可
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  // 可选：提供手动清除缓存的方法，需要强制刷新数据时调用
  clearCache(path?: string) {
    if (path) {
      this.cacheMap.delete(path);
    } else {
      this.cacheMap.clear();
    }
  }
}

• 第二步：在根模块替换默认路由复用策略

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
// 引入上面写的AgGridCacheRouteStrategy
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, /* 你的路由模块等其他依赖 */],
  providers: [
    { provide: RouteReuseStrategy, useClass: AgGridCacheRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

配置完成后即可达到你要的效果：首次进入组件正常加载数据、渲染ag-grid、初始化侧边栏，路由跳转到其他页面再返回时，组件直接复用原有实例，不触发任何重载逻辑，所有交互状态和离开时完全一致。

• 把组件移到<router-outlet>外层用显隐控制：组件确实不会被销毁，但会常驻内存，布局灵活度极低，只适合组件在所有页面都固定展示的场景，通用性差。
• 用service/localStorage/history state存状态手动恢复：需要手动序列化ag-grid所有交互状态（排序、筛选、选中、滚动位置、侧边栏状态、分页），代码维护成本极高，且返回时依然要走组件初始化、ag-grid重渲染流程，省不掉加载开销，体验差。

注意事项：缓存的组件会驻留内存，如果你的ag-grid加载的数据量极大，注意评估内存占用；如果需要在特定场景（比如账户信息更新）重新加载组件，调用自定义策略里的clearCache方法清除对应路由缓存即可，下次进入就会重新初始化。

内容的提问来源于stack exchange，提问作者sohaibex