第九章：RxJS / 响应式心智 —— 园区事件管网，不是一次性回调拼图

Angular 真正让很多人觉得“企业味很重”的，是 RxJS。

要先把这个心智立正：

RxJS 不是 Angular 专属。
但 Angular 与 Router、HttpClient、表单、事件流的结合，让 Observable 心智在 Angular 里非常自然。

你可以把 Observable 理解成：

text

园区事件管网
├── 用户输入会不断产生事件
├── 路由参数会不断变化
├── HTTP 返回结果会到来
├── WebSocket 会持续推送
├── 定时器会周期触发
└── 这些都是“随时间流动的数据”

而不是“现在有一个值”。

#1. Promise 和 Observable 的差异心智

text

Promise     = 一次性交付的快递
Observable  = 持续流动的园区广播管道

Promise 适合“一次拿到结果”。
Observable 适合“值会随着时间不断到来”。

#2. 最常见的 Angular 响应式流

search$ = this.keyword.valueChanges.pipe(
  startWith(''),
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(keyword => this.service.search(keyword))
);

这个管道的意思是：

text

输入框变化
  ↓
等用户稍微停一下
  ↓
如果关键字真的变了
  ↓
取消旧请求，切到新请求
  ↓
返回新的搜索结果流

在园区类比里就是：

text

访客不断提交查询
  ↓
中控室先别每敲一个字就出车
  ↓
等 300ms 确认意图
  ↓
旧调度单作废
  ↓
只执行最新那张

#3. Angular 中最重要的 Observable 使用姿势

第一优先：模板里用 async pipe

html

<ul>
  <li *ngFor="let item of departments$ | async">
    {{ item.name }}
  </li>
</ul>

第二优先：必须手动订阅时，考虑生命周期安全

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

this.route.paramMap
  .pipe(takeUntilDestroyed())
  .subscribe(params => {
    console.log(params.get('id'));
  });

#4. Angular 响应式心智的真正重点

不要把 RxJS 学成“操作符背诵比赛”。

真正该建立的是这句话：

在 Angular 里，很多重要数据不是静态变量，而是时间上的流。

典型来源包括：

HttpClient 返回的结果
ActivatedRoute 的参数变化
FormControl.valueChanges
用户交互事件
实时推送
定时刷新

所以 Angular 的很多高级代码，本质是在做：

text

流 -> 流的变换 -> 流的组合 -> 模板订阅

而不是“拿到值以后到处 set”。