Angular Academy · 课时

主题与 BehaviorSubject

Q: 「主题与 BehaviorSubject」这节课中我会学到什么？

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

使用主题多播值。

第 2 / 4 课13 个步骤

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

什么是 Subject

Subject 同时具备 Observable 和 Observer 的功能。您可以订阅它，也可以通过 next() 向其中推送值。它会进行多播：所有订阅者都会收到相同的值。

创建和使用 Subject

在某个值产生之后才加入的订阅者不会收到过去的值。

import { Subject } from 'rxjs';

const events$ = new Subject<string>();
events$.subscribe(v => console.log('A:', v));

events$.next('hello'); // A: hello
events$.subscribe(v => console.log('B:', v));
events$.next('world'); // A: world, B: world

Subjects 会进行多播

与每个订阅者分别运行的冷 Observable 不同，Subject 会共享一次执行过程。每个订阅者都会在同一时间收到相同的值。

BehaviorSubject

BehaviorSubject 需要一个初始值，并会记住最新的值。新订阅者会立即收到当前值。

import { BehaviorSubject } from 'rxjs';

const count$ = new BehaviorSubject<number>(0);
count$.subscribe(v => console.log('A:', v)); // A: 0
count$.next(5);
count$.subscribe(v => console.log('B:', v)); // B: 5 (gets latest)

读取当前值

BehaviorSubject 可通过 .value 或 .getValue() 同步公开当前值。普通 Subject 没有此功能。

const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }

将 Subject 用作简单存储

BehaviorSubject 是 Angular 服务中常见的轻量级状态容器：保存状态，将其公开为只读 observable，并使用 next 推送更新。

class CounterService {
  private count$ = new BehaviorSubject(0);
  readonly value$ = this.count$.asObservable();
  increment() { this.count$.next(this.count$.value + 1); }
}

使用 asObservable 进行封装

公开 .asObservable()，这样使用者可以订阅，但无法调用 next() 来破坏您的状态。

private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()

ReplaySubject

ReplaySubject 会向新订阅者重放可配置数量的历史值，适合缓存最近的 N 个事件。

import { ReplaySubject } from 'rxjs';

const recent$ = new ReplaySubject<number>(2); // buffer last 2
recent$.next(1); recent$.next(2); recent$.next(3);
recent$.subscribe(v => console.log(v)); // 2, 3

Subject 与 BehaviorSubject

Subject：没有初始值，较晚加入的订阅者会错过过去产生的值。
BehaviorSubject：有初始值，较晚加入的订阅者会收到最新值。对于用户界面状态，通常应使用 BehaviorSubject。

结束 Subject

调用 complete() 来结束 Subject。完成后，next() 产生的值会被忽略，订阅者也会被释放。对于会被销毁的服务，请始终结束其中的 subjects。

const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignored

Subjects 连接命令式与响应式

Subjects 可以将命令式事件（例如按钮点击处理函数或 WebSocket 消息）转换为 observable 流，让应用的其余部分以声明式方式响应这些事件。

快速检查

测试您对 subjects 的理解。

在交互式课程中回答

回顾：Subjects 与 BehaviorSubject

Subjects 是可以向其中推送值的多播流。

Subject：不会记住过去的值。
BehaviorSubject：保存并重放最新值；具有 .value。
ReplaySubject：重放最近的 N 个值。
使用 asObservable() 公开它，以保护状态。

下一节：取消订阅与内存泄漏。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 38
课程: 144

免费开始学习查看完整课程

常见问题解答

「主题与 BehaviorSubject」课时是免费的吗？

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

「主题与 BehaviorSubject」这节课中我会学到什么？

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

学习 Angular Academy 需要有经验吗？

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

「主题与 BehaviorSubject」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Angular Academy