Angular Ionic避免页面销毁与NgOnInit重复触发方案

问题场景 #

• 复用两类页面的跳转链路：Page A -> Page B -> Page A (second) -> Page B (second)，对应实际业务路径：posting -> profile -> another posting -> another profile
• 异常表现：从第二个Page B返回第二个Page A无异常，继续返回首个Page B时，Page B重新触发NgOnInit生命周期，页面变量全部为空，原因为Page B实例被框架销毁
• 根因：Angular默认RouteReuseStrategy仅在同路由同参数导航时复用组件实例，跨路由跳转时会销毁离开的组件实例，返回时重新创建组件并触发生命周期钩子
• 现有条件：所有路由URL均配置了不同区分参数，需要实现返回页面时保留完整原状态，无丢失或变更

方案1：自定义路由复用策略（原生能力，无额外依赖） #

通过替换框架默认的路由复用逻辑，指定需要缓存的页面，让框架在路由离开时保留组件实例，返回时直接复用缓存实例渲染，完全保留原有状态：

1. 新建自定义路由复用策略文件，代码如下：

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

export class CustomReuseStrategy implements RouteReuseStrategy {
  // 缓存容器：存储被保留的路由实例，key为路由唯一标识
  private readonly storedRouteHandles = new Map<string, DetachedRouteHandle>();

  // 配置需要缓存的路由path，对应你的posting、profile页面
  private readonly cachePaths = ['posting', 'profile'];

  // 路由离开时判断是否需要缓存该实例
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    const path = route.routeConfig?.path ?? '';
    return this.cachePaths.includes(path.split('/')[0]);
  }

  // 存储需要缓存的路由实例
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
    const routeKey = this.generateRouteKey(route);
    if (handle) {
      this.storedRouteHandles.set(routeKey, handle);
    } else {
      this.storedRouteHandles.delete(routeKey);
    }
  }

  // 导航进入新路由时判断是否存在可复用的缓存实例
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const routeKey = this.generateRouteKey(route);
    return this.storedRouteHandles.has(routeKey);
  }

  // 取出缓存的路由实例用于渲染
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const routeKey = this.generateRouteKey(route);
    return this.storedRouteHandles.get(routeKey) ?? null;
  }

  // 同路由配置下的复用判断
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

  // 生成路由唯一标识：路径+路由参数+查询参数，保证不同参数的同组件页面缓存互不干扰
  private generateRouteKey(route: ActivatedRouteSnapshot): string {
    const path = route.routeConfig?.path ?? '';
    const routeParams = Object.values(route.params).join('_');
    const queryParams = Object.values(route.queryParams).join('_');
    return `${path}_${routeParams}_${queryParams}`;
  }
}

2. 在根模块AppModule的依赖注入配置中替换默认路由复用策略：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { CustomReuseStrategy } from './custom-reuse.strategy';
// 其他你项目中已有的依赖导入

@NgModule({
  imports: [
    BrowserModule,
    // 你的AppRoutingModule等其他模块
  ],
  declarations: [
    // 你的项目组件
  ],
  providers: [
    // 替换默认路由复用策略
    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }
  ],
  bootstrap: [/* 你的根组件 */]
})
export class AppModule { }

注意：缓存实例会占用内存，若业务中同类型页面量级较大，可在缓存逻辑中增加淘汰规则，比如限制最大缓存数量，超出后删除最早存入的实例，避免内存泄漏。

方案2：状态与组件生命周期解耦（适配复杂缓存规则场景） #

如果不想修改全局路由复用逻辑，可将页面状态独立于组件存储：

• 新建单例StateService，按路由唯一标识（路径+参数）分别存储每个PageA、PageB的页面状态，包括接口返回数据、滚动位置、表单输入值、交互状态等
• 组件内监听路由离开事件，在离开时将当前所有需要保留的变量同步存入StateService
• 组件初始化时，优先根据当前路由标识从StateService读取已缓存的状态赋值给页面变量，无缓存时再走正常初始化、接口请求逻辑
• 轻量场景下也可使用sessionStorage做临时状态存储，注意在页面彻底退出后清理对应缓存键即可

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