Observable 是什么，Angular 如何使用 RxJS？

Question

Accepted Answer

**Observable**（来自 **RxJS** 库）代表**随时间推移的值流**，你可以订阅它。Angular 广泛使用 RxJS — HTTP 请求、路由事件、表单和 `EventEmitter` 都基于 Observable — 因此理解它们至关重要。 ## Observable vs Promise ```text Promise: a SINGLE future value, eager, can't cancel Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE ``` Observable 可以发出多个值，只在订阅时执行，且可以取消订阅（取消） — 使其非常适合事件、流和可能需要取消的 HTTP 请求。 ## 订阅 ```ts import { HttpClient } from "@angular/common/http"; this.http.get("/api/users").subscribe({ next: (users) => this.users = users, // each emitted value error: (err) => console.error(err), // on error complete: () => console.log("done"), // stream finished }); ``` 在你调用 `.subscribe()` 之前，什么都不会发生 — Observable 是延迟执行的。 ## 操作符转换流 ```ts import { map, filter, debounceTime } from "rxjs/operators"; this.searchInput.valueChanges.pipe( debounceTime(300), // wait for typing to pause filter(text => text.length > 2), // ignore short queries map(text => text.trim()), // transform ).subscribe(query => this.search(query)); ``` 操作符（在 `.pipe()` 内部链接）声明式地转换流 — debounce、filter、map 等 — 优雅地解决常见的异步问题（如搜索即输入）。 ## 内存泄漏危险：取消订阅 ```ts import { Subscription } from "rxjs"; private sub = new Subscription(); ngOnInit() { this.sub = this.data$.subscribe(...); } ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks ``` 手动订阅必须在 `ngOnDestroy` 中清理，否则组件销毁后它们仍会继续运行 — 造成内存泄漏。常见解决方案：**`async` 管道**（自动取消订阅）或 `takeUntilDestroyed()`。 ```html

``` ## 为什么这很重要 RxJS Observable 贯穿整个 Angular — 你无法在不使用它们的情况下使用 HttpClient、响应式表单或路由器。理解订阅、操作符，尤其是**取消订阅**（或使用 `async` 管道避免手动管理）是关键：这既是 Angular 异步数据处理能力的来源，也是最常见的陷阱之一（忘记取消订阅导致的泄漏）。