Angular服务中ngOnDestroy是否会运行？如何验证其有效性？

一、核心结论：应用（网站）关闭时，服务的ngOnDestroy()不会生效 #

Angular中服务的ngOnDestroy()钩子触发的前提是：服务实例被Angular依赖注入系统主动销毁。

• 若你的UserServiceService是通过providedIn: 'root'注册的根级服务，实例会伴随应用全程存在，仅当Angular应用被自身逻辑主动销毁（比如单页应用切换到完全独立的应用、或通过Angular卸载整个应用）时，ngOnDestroy()才会执行。
• 但用户直接关闭浏览器标签/窗口、或刷新页面时，浏览器会直接终止JavaScript进程，Angular没有机会触发服务的ngOnDestroy()钩子，你写的订阅取消、数据库监听关闭等逻辑也就不会执行。

二、验证ngOnDestroy()正常工作的方法 #

1. 验证常规销毁场景下的钩子执行 #

如果你的服务是组件级注入（在组件providers数组中声明），可通过销毁组件触发服务的ngOnDestroy()：

• 在组件模板中用*ngIf控制组件渲染状态，添加按钮切换*ngIf的布尔值
• 组件销毁时，浏览器控制台会打印你写的"Closed"日志，同时订阅会被取消、数据库监听关闭
• 打开浏览器开发者工具控制台，查看对应输出即可验证逻辑是否正确

2. 处理应用关闭时的清理需求（替代ngOnDestroy()） #

因为应用关闭时ngOnDestroy()不生效，需借助浏览器beforeunload或unload事件实现清理：
在服务constructor中添加事件监听：

constructor(
  private auth: AngularFireAuth,
  private db: AngularFireDatabase,
  private fnc: AngularFireFunctions,
  private router: Router,
  private tostr: ToastrService,
) {
  this.subsc = this.auth.authState.subscribe((user) => {
    if (user) {
      this.currentUserId = user.uid; // 补充currentUserId赋值
      this.db.database
        .ref("users/" + user.uid + "/shopCart/")
        .on("value", (snap) => {});
    } else {
      // 无用户逻辑
    }
  });

  // 添加应用关闭/刷新时的清理逻辑
  window.addEventListener('beforeunload', () => {
    console.log('应用即将关闭');
    this.subsc?.unsubscribe();
    if (this.currentUserId) {
      this.db.database.ref("users/" + this.currentUserId + "/shopCart/").off();
    }
  });
}

验证方法：

• 打开浏览器开发者工具控制台，勾选“Preserve log”（保留日志）
• 关闭标签页或刷新页面，重新打开控制台（部分浏览器需开启日志保留设置），即可看到对应日志输出，同时可验证数据库监听是否被正确关闭

三、你的代码注意点 #

• 代码中this.currentUserId未定义，需在authState订阅中补充赋值，否则清理数据库监听时会报错
• 根级服务的ngOnDestroy()仅能在Angular主动销毁应用时触发，不要依赖它处理页面关闭/刷新场景

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