Angular 100天挑战：深入理解RxJS Subject与多播机制-CSDN博客

Angular 100天挑战：深入理解RxJS Subject与多播机制

什么是RxJS Subject？

在RxJS中，Subject是一种特殊的Observable类型，它允许将值多播给多个观察者。Subject既是Observable又是Observer，这意味着你可以订阅它，也可以手动调用next()、error()和complete()方法来控制数据流。

为什么需要Subject？

普通Observable的问题

普通Observable是单播的（unicast），这意味着每次订阅都会创建一个新的执行上下文：

const observable = interval(500).pipe(take(5));

observable.subscribe(val => console.log(`Observer A: ${val}`));
// 2秒后订阅
setTimeout(() => {
  observable.subscribe(val => console.log(`Observer B: ${val}`));
}, 2000);

输出结果会显示两个观察者各自独立接收完整的数据序列，就像两个人在不同时间观看同一部录制的视频。

Subject的解决方案

Subject实现了多播（multicast），允许多个观察者共享同一个执行上下文：

const subject = new Subject();
const observable = interval(500).pipe(take(5));

observable.subscribe(subject);

subject.subscribe(val => console.log(`Observer A: ${val}`));
setTimeout(() => {
  subject.subscribe(val => console.log(`Observer B: ${val}`));
}, 2000);

这类似于多人同时观看同一个直播流，所有观察者看到的是相同时间点的数据。

Subject的四种变体

1. BehaviorSubject

BehaviorSubject会记住"当前值"，并在新观察者订阅时立即发送该值：

const subject = new BehaviorSubject(0); // 必须提供初始值

subject.subscribe(val => console.log(`Observer A: ${val}`));
subject.next(1);
subject.next(2);

setTimeout(() => {
  subject.subscribe(val => console.log(`Observer B: ${val}`));
}, 1000);

典型应用场景：用户认证状态管理、当前主题设置等需要初始值的场景。

2. ReplaySubject

ReplaySubject可以缓存指定数量的值，并在新观察者订阅时重放这些值：

const subject = new ReplaySubject(2); // 缓存最近2个值

subject.next(1);
subject.next(2);
subject.next(3);

subject.subscribe(val => console.log(`Observer: ${val}`));
// 输出: 2, 3

还可以设置时间窗口，只重放特定时间范围内的值：

const subject = new ReplaySubject(100, 500); // 缓存最多100个值，但不超过500ms内的值

3. AsyncSubject

AsyncSubject只在流完成时发送最后一个值：

const subject = new AsyncSubject();

subject.subscribe(val => console.log(`Observer: ${val}`));

subject.next(1);
subject.next(2);
subject.next(3);
subject.complete(); // 此时才会发送3

行为类似于Promise，只在完成时解析一个值。

4. Void Subject

标准Subject，不缓存任何值，只发送订阅后产生的值。

多播操作符

multicast操作符

multicast操作符可以将普通Observable转换为ConnectableObservable：

const connectable = interval(1000).pipe(
  take(5),
  multicast(new Subject())
) as ConnectableObservable<number>;

connectable.subscribe(val => console.log(`Observer A: ${val}`));
const connection = connectable.connect(); // 手动启动

setTimeout(() => {
  connectable.subscribe(val => console.log(`Observer B: ${val}`));
}, 2500);

refCount自动管理

refCount可以自动管理连接状态：

const observable = interval(1000).pipe(
  take(5),
  multicast(new Subject()),
  refCount() // 自动连接/断开
);

const sub1 = observable.subscribe(val => console.log(`Observer A: ${val}`));
setTimeout(() => {
  const sub2 = observable.subscribe(val => console.log(`Observer B: ${val}`));
}, 2500);

当订阅数从0变为1时自动连接，从1变为0时自动断开。

实际应用场景

1. 搜索建议

@Component({
  // ...
})
export class SearchComponent {
  searchTerm$ = new Subject<string>();

  constructor() {
    this.searchTerm$.pipe(
      debounceTime(300),
      distinctUntilChanged()
    ).subscribe(term => this.search(term));
  }

  onSearch(term: string) {
    this.searchTerm$.next(term);
  }
}

2. 状态管理

@Injectable()
export class AuthService {
  private _user = new BehaviorSubject<User | null>(null);
  user$ = this._user.asObservable();

  login(credentials: Credentials) {
    // ...登录逻辑
    this._user.next(user);
  }
}

3. 组件间通信

@Injectable()
export class EventBusService {
  private _events = new Subject<Event>();
  events$ = this._events.asObservable();

  emit(event: Event) {
    this._events.next(event);
  }
}