如何在Angular中通过路由级提供者正确管理服务销毁？

核心原因 #

Angular路由级别提供的服务未销毁，通常由以下几种情况导致：

1. 服务未正确实现OnDestroy接口 #

你的服务中虽然定义了ngOnDestroy方法，但未导入并实现OnDestroy接口，Angular不会识别这个生命周期钩子，因此不会触发销毁逻辑。

修复代码：

import { Injectable, OnDestroy } from '@angular/core';

@Injectable()
export class MyService implements OnDestroy {
  constructor() {
    console.log('MY SERVICE IS CREATED');
  }

  ngOnDestroy(): void {
    console.log('MY SERVICE IS DESTROYED');
  }
}

2. 路由复用策略导致路由被缓存 #

如果项目中自定义了RouteReuseStrategy，或者启用了路由复用，路由组件和对应的服务会被缓存，不会随导航销毁。

修复方式：
暂时恢复默认路由复用策略，验证是否解决问题：

import { NgModule } from '@angular/core';
import { RouterModule, RouteReuseStrategy, DefaultRouteReuseStrategy } from '@angular/router';
import { MainPage } from './main-page.component';
import { MyService } from './my.service';

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: '',
        component: MainPage,
        providers: [MyService]
      }
    ])
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: DefaultRouteReuseStrategy }
  ]
})
export class LazyLoadedModule {}

3. 服务实例被外部引用导致内存泄漏 #

如果根注入器中的服务、全局订阅或其他长期存在的对象持有MyService的引用，垃圾回收器无法回收该实例，导致服务留存内存。

排查方法：

• 使用Chrome DevTools的内存快照功能，导航到目标路由再离开，对比快照查找MyService实例的引用链。
• 检查组件中是否存在未取消的订阅（如Observable未调用unsubscribe或使用takeUntil等操作符），避免组件与服务互相引用。

验证步骤 #

1. 修复服务的OnDestroy实现后，导航到test-page，确认控制台输出MY SERVICE IS CREATED。
2. 导航到其他路由，检查控制台是否输出MY SERVICE IS DESTROYED。
3. 若仍未触发，依次排查路由复用策略和外部引用问题。

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