Angular 16 中 RxJS 的最佳实践：避免订阅陷阱并优化流处理

核心要点

• 使用 AsyncPipe 处理模板中的 Observable 订阅。它可以管理订阅的取消，无需手动清理，从而防止内存泄漏。

• 与嵌套流相比，更应该使用展平（flatten）和组合流。switchMap、mergeMap、exhaustMap 甚至 debounceTime 等 RxJS 操作符可以声明式地描述所需的数据流，并自动管理其依赖关系的订阅/取消订阅。

• 将 takeUntil 与 DestroyRef 结合使用，可实现明确的订阅清理。

• 使用 catchError 和 retry 来优雅地管理失败和失败恢复

• 使用 Angular Signals 来处理用户界面触发的更新。对于事件流，应该继续使用 RxJS Observable。这种组合可帮助我们充分发挥这两种工具的潜力。

引言

Angular 16 标志着现代反应式 Angular 版本的引入。它带来了像 DestroyRef 和 Signals 这样的基础工具。这些新引入的工具重新定义了开发者如何处理反应性、生命周期管理和状态更新，为 Angular 17/18 及以后的发展奠定了基础。

本文探讨了 RxJS 的最佳实践，重点关注现代生态系统，并将无缝扩展到 Angular 17/18，确保代码能够保持高效和对未来的兼容性。

Angular 中 RxJS 管理的演变

在 Angular 16 之前，开发者主要依赖于手动的生命周期管理，比如ngOnDestroy，缺乏轻量级反应式的原生工具。Angular 16 的 DestroyRef 和 Signals 通过抽象清理逻辑并实现细粒度状态反应性，解决了对工具的需求。Angular 16 为现代反应性范式奠定了基础，这一范式在 Angular 17/18 中得到了进一步的完善，而没有改变核心原则。

DestroyRef 是一个改变游戏规则的工具，它通过抽象生命周期管理来简化 Observable 的清理。这个类的引入标志着现代反应式生态系统的开始，开发者可以更多地关注逻辑，而不是样板式的代码。Angular 17/18 进一步完善了这些模式，例如提高 Signal 与 Observable 的互操作性并对性能进行了优化增强。这里概述的最佳实践是为 Angular 16 开发的，但同样适用于 Angular 17/18。

同样，虽然 RxJS 操作符（如switchMap和mergeMap）长期以来都用来帮助展平（flatten）嵌套流，但它们的正确用法常常会因为过度依赖多个、临时的订阅而被掩盖。现在的目标是将这些技术与 Angular 的新能力结合起来，如 Signals，以创建既简洁又可维护的反应式代码。

Angular 16 的 Signals 标志着状态管理的转折点，它实现了无需订阅的轻量级反应性。当与 RxJS 结合时，它们形成了现代 Angular 应用程序的整体反应式工具包。

最佳实践

AsyncPipe

在现代 Angular 生态系统（从 Angular 16 开始）中，AsyncPipe 是反应式 UI 绑定的基石。它在组件销毁时会自动取消订阅，这是一个避免内存泄漏的关键特性。这种模式在 Angular 17/18 中仍然是最佳实践，确保你的模板能够保持整洁和反应性。现在，AsyncPipe 可以处理订阅和取消订阅，无需开发者干预。这会使得模板更加干净，样板式代码更少。

例如，考虑一个显示项目列表的组件：

<!-- items.component.html --><ul>  <li *ngFor="let item of items$ | async">{{ item.name }}</li></ul>

当使用 AsyncPipe 将 Observable 绑定到模板时，Angular 会检查更新。组件在销毁时也会进行清理。这种方法因其简单性变得优雅，编写的代码会更少，并且避免了内存泄漏。

使用 RxJS 操作符展平 Observable 流

对于 Angular 开发者来说，处理嵌套订阅经常会带来挫败感。你可能遇到过需要顺序发生一系列 Observable 的情况。RxJS 操作符如switchMap、mergeMap和concatMap提供了一个复杂的替代方案，即在订阅内部嵌套订阅，这很快就会导致代码中出现过于复杂的问题。

设想有一个搜索栏，随着用户输入，检索潜在的计划。如果你没有使用正确的操作符，可能会记录下每一次按键。相反，我们可以使用操作符组合来对输入实现防抖动（debounce），并在用户修改查询时，再切换到新的搜索流。

// plan-search.component.tsimport { Component, OnInit } from '@angular/core';import { Subject, Observable } from 'RxJS';import { debounceTime, distinctUntilChanged, switchMap } from 'RxJS/operators';import { PlanService } from './plan.service';

@Component({  selector: 'app-plan-search',  template: `    <input type="text" (input)="search($event.target.value)" placeholder="Search Plans" />    <ul>      <li *ngFor="let plan of plans$ | async">{{ plan }}</li>    </ul>  `})export class PlanSearchComponent implements OnInit {  private searchTerms = new Subject<string>();  plans$!: Observable<string[]>;

  constructor(private planService: PlanService) {}

  search(term: string): void {    this.searchTerms.next(term);  }

  ngOnInit() {    this.plans$ = this.searchTerms.pipe(      debounceTime(300),      distinctUntilChanged(),      switchMap(term => this.planService.searchPlans(term))    );  }}

通过这种方式使用操作符可以将多个流展平为一个可管理的管道，并避免了手动订阅和取消订阅每个动作。这种模式不仅使代码更整洁，而且更易于响应用户的交互。

取消订阅和错误处理

让 Observable 无休止地运行，会导致内存泄漏，这是 Angular 中的传统反模式之一。拥有一个好的取消订阅计划至关重要。尽管取消订阅通常由模板中的 AsyncPipe 处理，但仍有一些情况需要 TypeScript 代码显式取消订阅。在某些情况下，像takeUntil这样的操作符或 Angular 的onDestroy生命周期钩子可能会非常有用。

例如，在组件中订阅数据流时：

import { Component, OnDestroy } from '@angular/core';import { Subject } from 'rxjs';import { takeUntil } from 'rxjs/operators';import { DataService } from './data.service';

@Component({  selector: 'app-data-viewer',  template: `<!-- component template -->`})export class DataViewerComponent implements OnDestroy {  private destroy$ = new Subject<void>();    constructor(private dataService: DataService) {    this.dataService.getData().pipe(      takeUntil(this.destroy$)    ).subscribe(data => {      // handle data    });  }

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

借助像catchError和retry这样的操作符结合取消订阅策略，有助于确保应用程序能够优雅地处理难以预见的错误。通过结合问题发现并快速修复，这种集成方法产生的代码既强大又易于维护。

合并流

有时候，你需要合并多个 Observable 的输出。那么可以使用combineLatest、forkJoin或zip等操作符，以便于显示不同来源的数据。它们能够帮助你简单地合并流。这种方法保持了反应式和声明式的风格。当一个或多个源流变化时，它也会自动更新，无需手动干预。

设想一下，将用户 profile 与设置数据结合起来：

import { combineLatest } from 'rxjs';

combineLatest([this.userService.getProfile(), this.settingsService.getSettings()]).subscribe(  ([profile, settings]) => {    // 处理合并后的profile与设置  });

这种策略不仅通过避免嵌套订阅实现了复杂性的最小化，而且能够将你的思维转向更加反应式和声明式的编程风格。

集成 Angular 16 Signals 以实现高效的状态管理

虽然 RxJS 在处理异步操作中继续发挥关键作用，但 Angular 16 新的 Signals 提供了另一层的反应性，它简化了状态管理。当全局状态需要在 UI 中触发自动更新而无需、Observable 订阅的开销时，Signals 会特别有用。例如，服务可以为当前选定的计划暴露一个 signal：

// analysis.service.tsimport { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })export class AnalysisService {  currentPlan = signal<string>('Plan A');

  updateCurrentPlan(newPlan: string) {    this.currentPlan.set(newPlan);  }}

通过在组件中结合 signals 和 RxJS 流，你可以享受两者的最佳效果：一个整洁、声明式的状态管理模型，以及强大的操作符来处理复杂的异步事件。

Signals 与 Observables

Angular 16 包含了 RxJS RxJS 和 Signals，能够进行反应式编程，但它们服务于不同的需求。Signals 简化了 UI 状态管理，而 Observables 用于处理异步操作。Signals 是 Angular 16 现代反应式模型的核心组成部分，专为需要 UI 状态立即更新的场景而设计（例如切换模态框或主题）。

Signals 是轻量级的变量，当它们的值变化时会自动更新 UI。例如，跟踪模态框的打开/关闭功能（isModalOpen = signals.set(false)）或用户的主题偏好，比如，暗色和白色模式。它不需要订阅，更改会立即触发更新。

Observables 擅长管理同步操作，如 API 调用。借助debounceTime和switchMap这样的操作符能够处理随时间变化的数据。例如，考虑这个带有重试的搜索结果的样例：

this.service.search(query).pipe(retry(3), catchError(error => of([])))

对于局部状态（简单的反应式状态）可以使用 Signals，对于异步逻辑可以使用 Observables。这是一个搜索栏的样例，其中 Signals 跟踪输入，转换为 Observable 以进行防抖动的 API 调用：

query = signal('');results$ = toObservable(this.query).pipe(  debounceTime(300),  switchMap(q => this.service.search(q)));

采用整体的反应式编程方法

编写可维护且高效的 Angular 应用程序的关键在于将这些最佳实践整合到一个内聚的整体工作流程中。不要将这些技术视为孤立的技巧，而要考虑如何使用它们共同解决实际的问题。例如，使用 AsyncPipe 可以最大限度地减少手动订阅管理，再结合 RxJS 操作符来展平流，这样编写出的代码不仅高效，而且更易于理解和测试。

在现实的场景中，比如，实时搜索功能或显示多个数据源的仪表板，这些实践能够共同减少代码复杂性并提高性能。集成 Angular 16 Signals 会进一步简化状态管理，确保即使应用程序的复杂性增长，用户界面仍然能够保持及时响应。

结论

随着 Angular 的发展，我们用于管理状态、处理用户输入和组合复杂反应流的最佳实践也在不断发展，我们可以利用 AsyncPipe 来简化模板绑定、使用像 switchMap 这样的操作符展平嵌套订阅能够使代码更易读、采用智能取消订阅策略以防止内存泄露，而错误处理和强类型则额外增加了韧性。

通过采用这些策略，能够确保你的应用程序在 Angular 现代生态系统（16+）中健康发展，即利用 RxJS 来处理异步逻辑并使用 Angular 的原生工具进行状态和生命周期管理。我们讨论的这些实践与 Angular 17/18 均能兼容，从而确保你的代码随着框架的发展而保持高效性和可维护性。

对于更高级的异步处理，RxJS 仍然是不可或缺的。但是，当涉及到本地或全局状态管理时，Angular Signals 提供了一种新颖、简洁的方法，它减少了样板代码，并能自动更新 UI。融合这些实践会确保你的 Angular 16 应用程序保持高效、可维护，而且更重要的是，即使复杂性不断增长，也能保证应用易于理解。

查看英文原文：RxJS Best Practices in Angular 16: Avoiding Subscription Pitfalls and Optimizing Streams