Angular Academy · 课时

取消订阅与内存泄漏

Q: 「取消订阅与内存泄漏」这节课中我会学到什么？

使用 takeUntilDestroyed 避免泄漏。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 takeUntilDestroyed 避免泄漏。

取消订阅与内存泄漏 是 CoddyKit 上的免费 Angular Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

内存泄漏问题

如果您在组件中订阅了一个长期存在的 Observable，却始终不取消订阅，那么组件销毁后回调仍会继续运行。这会造成内存泄漏，还可能导致错误或重复工作。

手动取消订阅

基本解决方法是：保存 Subscription，并在 ngOnDestroy 中取消订阅。

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

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

管理多个订阅

单个 Subscription 可以通过 .add() 收集子订阅，然后一次调用 unsubscribe() 即可将它们全部清理。

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

Angular 提供了 takeUntilDestroyed()，组件销毁时它会自动完成流，因此不需要手动编写 ngOnDestroy。

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

注入上下文要求

不带参数调用 takeUntilDestroyed() 时，必须在注入上下文中运行（例如构造函数中）。在上下文之外，请显式传入 DestroyRef。

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

takeUntil 模式（经典方式）

在 takeUntilDestroyed 出现之前，标准模式是使用一个在 ngOnDestroy 中产生值的 Subject。

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

会完成的流无需清理

HttpClient 请求产生一次值后就会完成，因此会自行清理。通常不需要取消单次 HTTP 调用的订阅，不过使用 takeUntilDestroyed 仍然是安全的。

async 管道会为您处理

对于模板，最佳做法是让 async 管道自动订阅和取消订阅。我们将在下一节介绍它。

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

订阅泄漏的迹象

重复的网络请求、导航后仍触发的处理函数、开发者工具中不断增长的内存，或“Cannot read property of destroyed view”错误，通常都说明忘记取消订阅。

toSignal 也会自动清理

使用 toSignal() 将 observable 转换为 signal 时，所属上下文销毁后也会自动取消订阅。

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

选择合适的方法

在模板中优先使用 async 管道或 toSignal；对于手动订阅，请使用 takeUntilDestroyed()；只有在需要时，才退而使用 Subscription 集合。

快速检查

测试您对取消订阅的理解。

回顾：取消订阅与内存泄漏

始终清理长期存在的订阅。

takeUntilDestroyed() 会在销毁时自动完成。
async 管道和 toSignal() 会为您管理订阅。
单次 HTTP 调用会自行完成。

下一节：深入了解 async 管道。

常见问题解答

「取消订阅与内存泄漏」课时是免费的吗？

是的 — 「取消订阅与内存泄漏」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「取消订阅与内存泄漏」这节课中我会学到什么？

使用 takeUntilDestroyed 避免泄漏。你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「取消订阅与内存泄漏」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy