RxJS 与 Signals

路线图「RxJS」与「Signals」：HttpClient、Router、表单 valueChanges 均返回 Observable；Angular 16+ Signals 提供更细粒度的响应式状态，新应用可配合 Zoneless 减少变更检测开销。

学习目标

• 理解 Observable 与 Promise 的差异
• 使用 map、switchMap、debounceTime、catchError
• 用 Signals 与 async 管道简化模板订阅

核心概念

Observable 与操作符

import { of } from "rxjs";
import { map, switchMap, debounceTime, catchError } from "rxjs/operators";

this.route.paramMap.pipe(
  switchMap((params) => this.trackService.getBySlug(params.get("slug")!)),
  catchError(() => of(null)),
).subscribe((track) => (this.track = track));

switchMap 取消未完成的上一次请求，防路由快速切换竞态。搜索框常用 debounceTime(300) + switchMap。

Signals

import { signal, computed, effect } from "@angular/core";

export class SearchComponent {
  keyword = signal("");
  tracks = signal<Track[]>([]);
  filtered = computed(() =>
    this.tracks().filter((t) => t.title.includes(this.keyword())),
  );

  constructor() {
    effect(() => console.log("keyword:", this.keyword()));
  }
}

模板：{{ keyword() }}、@for (t of filtered(); track t.slug)。Signals 类似 React useState + useMemo 的组合，但框架原生集成。

与 React/Next 对照

	Angular RxJS	Angular Signals	React
异步流	Observable	signal + effect	Promise / async
派生状态	pipe(map)	computed()	useMemo
模板订阅	async pipe	直接 () 调用	JSX 内 state

存量 Angular 项目 RxJS 无处不在；新项目可 Signals 为主、RxJS 管 HTTP 流。

练习

• 搜索框 debounceTime(300) + switchMap 调 API