Angular DestroyRef 怎么避免异步回调访问已销毁组件

Angular 组件里的定时器、Promise 或网络回调，可能在组件离开页面后才返回。处理这类竞态时，我会把 DestroyRef.destroyed 放在回写状态之前：如果实例已经销毁，就直接结束回调。它能防止已销毁视图上的访问，但不会自动取消网络请求，也不替代 Observable 的订阅清理。

官方地址：https://angular.dev/api/core/DestroyRef

先把 DestroyRef 看成组件生命周期边界

DestroyRef 不是一个全局的“组件是否存在”开关。Angular 官方 API 说明，若它在组件或指令中注入，onDestroy 回调会跟随该组件或指令销毁；若在其他注入器中取得，范围则由对应注入器决定。因此，辅助函数接收 DestroyRef 时，调用方要明确传入的是哪个生命周期。

常见的延迟回写可以这样写：

import { Component, DestroyRef, inject } from '@angular/core';

@Component({ selector: 'app-profile', template: '{{ name }}' })
export class ProfileComponent {
  private readonly destroyRef = inject(DestroyRef);
  name = '加载中';

  loadName() {
    fetch('/api/profile')
      .then(response => response.json())
      .then(data => {
        // 回调可能晚于组件销毁，先挡住无效的状态写入。
        if (this.destroyRef.destroyed) return;
        this.name = data.name;
      });
  }
}

关键位置是“结果已经回来，但还没有写入组件状态”的瞬间。不要只在发起请求时判断一次，因为那时组件可能仍然存活。

把 destroyed 检查放在回写之前

判断通过就更新信号、字段或视图；判断失败就丢弃这次结果。这个保护只影响回调中的后续逻辑，不会让浏览器停止已经发出的请求，所以它解决的是生命周期竞态，而不是资源节省。

清理代码放近，测试竞态要覆盖

如果还要在组件销毁时关闭资源，可以把注册和使用放在同一个服务或辅助函数附近。onDestroy 会返回注销函数；当资源提前结束时调用它，可避免不必要的清理回调。

const destroyRef = inject(DestroyRef);
const stop = startPolling();

// 把资源释放绑定到同一个生命周期范围。
const unregister = destroyRef.onDestroy(() => stop());

function finishEarly() {
  // 业务提前结束时，先停资源，再注销生命周期回调。
  stop();
  unregister();
}

测试时至少覆盖两种顺序：组件先销毁、异步结果后到；以及结果先到、组件随后销毁。第一种应当不再写入状态，第二种则应完成正常回写。若请求必须在离开页面时停止，再给请求接入 AbortController；若是 Observable，则继续采用它自己的订阅生命周期方案。

相关问题

DestroyRef.destroyed 能取消 Promise 吗？

不能。它只能告诉你实例是否已销毁，并让回调主动跳过后续逻辑；Promise 本身没有通用取消接口。

DestroyRef 应该在什么时候注入？

在组件、指令或明确的注入上下文中注入，并把它传给需要跟随该生命周期清理的辅助函数，避免误用根注入器范围。

只写 ngOnDestroy 够不够？

它适合集中处理销毁逻辑；当异步代码和资源创建位置分散时，DestroyRef 能让检查或清理更靠近使用点。