Angular 中的Subject 与BehaviorSubject 与ReplaySubject

Angular 中的 Subject、BehaviorSubject 和 ReplaySubject

typescript
import { Subject } from 'rxjs';
// 创建一个 Subject
const subject = new Subject();
// 添加观察者并订阅
const subscription = subject.subscribe(data => {
  console.log(`观察者A收到数据：${data}`);
});
// 发送数据给观察者
subject.next(1); // 输出：观察者A收到数据：1
subject.next(2); // 输出：观察者A收到数据：2
// 取消订阅
subscription.unsubscribe();

typescript
import { BehaviorSubject } from 'rxjs';
// 创建一个 BehaviorSubject，设置初始值为0
const behaviorSubject = new BehaviorSubject(0);
// 添加观察者并订阅
const subscription = behaviorSubject.subscribe(data => {
  console.log(`观察者B收到数据：${data}`);
});
// 发送新数据给观察者
behaviorSubject.next(1); // 输出：观察者B收到数据：1
// 新的订阅者立即收到最新值
behaviorSubject.subscribe(data => {
  console.log(`新观察者收到数据：${data}`);
});
// 输出：新观察者收到数据：1
// 更新值并通知所有观察者
behaviorSubject.next(2); // 输出：观察者B收到数据：2，新观察者收到数据：2
// 取消订阅
subscription.unsubscribe();

typescript
import { ReplaySubject } from 'rxjs';
// 创建一个 ReplaySubject，设置缓存大小为2
const replaySubject = new ReplaySubject(2);
// 发送数据给观察者
replaySubject.next(1);
replaySubject.next(2);
replaySubject.next(3);
// 添加观察者并订阅
const subscription = replaySubject.subscribe(data => {
  console.log(`观察者C收到数据：${data}`);
});
// 输出：观察者C收到数据：2，观察者C收到数据：3
// 取消订阅
subscription.unsubscribe();