Angular 4中RouteReuseStrategy内存泄漏：ngOnDestroy未触发问题求助

嘿，这个问题我在项目里踩过坑！RouteReuseStrategy确实能让路由切换更丝滑，但组件被缓存时ngOnDestroy不会触发，那些没清理的订阅、定时器肯定会搞出内存泄漏。给你几个实用的解决思路：

1. 给组件加自定义清理方法，在缓存销毁时触发 #

既然ngOnDestroy不会自动执行，我们可以自己定义一个清理方法，然后在RouteReuseStrategy决定丢弃缓存组件的时候手动调用它。

第一步：在缓存组件中实现清理逻辑 #

在需要缓存的组件里，把原本放在ngOnDestroy里的清理代码抽成一个公共方法，同时保留ngOnDestroy以防组件正常销毁时也能执行：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-cached-component',
  templateUrl: './cached-component.component.html'
})
export class CachedComponent implements OnInit, OnDestroy {
  private dataSubscription: Subscription;
  private timerId: number;
  private resizeHandler: () => void;

  ngOnInit() {
    // 示例：订阅一个数据流
    this.dataSubscription = someDataService.getData().subscribe(data => {
      // 处理数据
    });
    // 示例：设置定时器
    this.timerId = window.setInterval(() => console.log('timer running'), 1000);
    // 示例：绑定DOM事件
    this.resizeHandler = () => console.log('window resized');
    window.addEventListener('resize', this.resizeHandler);
  }

  // 自定义清理方法
  public cleanup(): void {
    // 取消订阅
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
    // 清理定时器
    clearTimeout(this.timerId);
    // 解绑DOM事件
    window.removeEventListener('resize', this.resizeHandler);
  }

  // 保留ngOnDestroy，兼容组件正常销毁的场景
  ngOnDestroy() {
    this.cleanup();
  }
}

第二步：在RouteReuseStrategy中调用清理方法 #

在你的自定义RouteReuseStrategy类的destroyRouteHandle方法里，获取组件实例并调用cleanup：

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

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private cache = new Map<string, DetachedRouteHandle>();

  // 其他接口方法的实现（shouldReuseRoute、shouldDetach、store、retrieve）...

  destroyRouteHandle(route: ActivatedRouteSnapshot): void {
    const routePath = route.routeConfig?.path;
    if (routePath) {
      const cachedHandle = this.cache.get(routePath);
      // 检查组件实例是否有cleanup方法，有的话调用
      if (cachedHandle?.componentInstance && typeof cachedHandle.componentInstance.cleanup === 'function') {
        cachedHandle.componentInstance.cleanup();
      }
      this.cache.delete(routePath);
    }
  }
}

2. 监听路由事件，在组件离开且不被缓存时自动清理 #

可以在组件内部监听路由切换事件，判断当前路由是否会被缓存，如果不会就执行清理逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { RouteReuseStrategy } from '@angular/router';
import { Subscription, Subject } from 'rxjs';
import { filter, takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-cached-component',
  templateUrl: './cached-component.component.html'
})
export class CachedComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  private dataSubscription: Subscription;

  constructor(
    private router: Router,
    private routeReuseStrategy: RouteReuseStrategy
  ) {}

  ngOnInit() {
    this.dataSubscription = someDataService.getData().subscribe(data => {
      // 处理数据
    });

    // 监听路由切换事件
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      filter(() => {
        // 判断当前路由是否会被缓存
        const currentRoute = this.router.routerState.snapshot.root.firstChild;
        return !this.routeReuseStrategy.shouldDetach(currentRoute);
      }),
      takeUntil(this.destroy$)
    ).subscribe(() => {
      this.cleanup();
    });
  }

  private cleanup(): void {
    if (this.dataSubscription) {
      this.dataSubscription.unsubscribe();
    }
    // 其他清理逻辑
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
    this.cleanup();
  }
}

3. 给缓存设置上限或超时，自动清理过期缓存 #

如果你的应用缓存了很多组件，可以给缓存加个“过期机制”，比如限制缓存数量或者设置超时时间，当缓存达到上限或组件过期时，自动清理并释放内存：

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

// 扩展缓存项，增加时间戳
interface CachedItem {
  handle: DetachedRouteHandle;
  timestamp: number;
}

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private cache = new Map<string, CachedItem>();
  private maxCacheCount = 5; // 最多缓存5个组件
  private cacheTimeout = 300000; // 5分钟超时

  // 其他接口方法实现...

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const now = Date.now();
    const routePath = route.routeConfig?.path;
    if (!routePath) return;

    // 先清理超时的缓存
    this.cache.forEach((item, key) => {
      if (now - item.timestamp > this.cacheTimeout) {
        if (item.handle.componentInstance.cleanup) {
          item.handle.componentInstance.cleanup();
        }
        this.cache.delete(key);
      }
    });

    // 如果缓存数量超过上限，移除最早的缓存
    if (this.cache.size >= this.maxCacheCount) {
      const oldestKey = this.cache.keys().next().value;
      const oldestItem = this.cache.get(oldestKey);
      if (oldestItem?.handle.componentInstance.cleanup) {
        oldestItem.handle.componentInstance.cleanup();
      }
      this.cache.delete(oldestKey);
    }

    // 存入新的缓存项
    this.cache.set(routePath, { handle, timestamp: now });
  }
}

4. 用WeakMap存储缓存，让垃圾回收自动处理 #

如果你的组件实例没有其他强引用，可以用WeakMap替代Map来存储缓存。WeakMap的键是弱引用，当组件实例没有其他引用时，垃圾回收器会自动回收对应的缓存项：

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

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  // 用WeakMap存储，键为ActivatedRouteSnapshot（弱引用）
  private cache = new WeakMap<ActivatedRouteSnapshot, DetachedRouteHandle>();

  // 其他接口方法实现...
}

不过这种方式无法手动遍历缓存，适合不需要主动清理缓存的场景。

最后提醒一下：一定要排查所有可能的内存泄漏点——比如RxJS订阅、setInterval/setTimeout、DOM事件监听、第三方库创建的实例等，这些都要在清理逻辑里处理到位。

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