RxJS of操作符异常：非弹窗场景下订阅无法接收数据

问题场景 #

业务中通过多 Observable 串联获取数据，逻辑如下：

• collectData方法：根据withDialog参数，返回弹窗afterClosed()的 Observable 或of({})的 Observable，通过map合并默认值；
• doSth方法：订阅collectData的结果，处理后通过 Subject 返回新的 Observable；
• click方法：订阅doSth的结果以获取数据。

出现的问题：使用弹窗时数据接收正常，但改用of({})时，click中的订阅始终收不到数据。

原因分析 #

核心矛盾在于 Subject 的特性 和 同步 Observable 的执行时机：

• of({})是同步 Observable，订阅后会立即发射值；
• 当collectData返回of({})时，doSth里的订阅会同步触发subject.next()，但此时click方法中的订阅还未执行，而 Subject 不会保存已发射的值，后续订阅自然无法接收；
• 弹窗的afterClosed()是异步 Observable，subject.next()会在异步时机触发，此时click的订阅已完成，因此能正常接收数据。

解决方案 #

方案1：用 ReplaySubject 替代 Subject

ReplaySubject 会保存指定数量的已发射值，后续订阅可以获取到之前发射的内容：

doSth(withDialog: boolean) {
  const subject = new ReplaySubject(1); // 保存最近1个发射值
  this.collectData(withDialog).subscribe({
    next: (res) => {
      // 原有数据处理逻辑
      subject.next(res);
      subject.complete();
    },
    error: (err) => subject.error(err)
  });
  return subject.asObservable();
}

方案2：移除 Subject 转发，直接返回链式 Observable

这是更贴合 RxJS 设计风格的写法，通过 pipe 串联操作，无需手动管理订阅与 Subject，同步/异步场景均能正常工作，还能避免内存泄漏：

doSth(withDialog: boolean) {
  return this.collectData(withDialog).pipe(
    map((res) => {
      // 此处编写原有数据处理逻辑，返回处理后的值
      return res;
    })
  );
}

内容的提问来源于stack exchange，提问作者NCC-2909-M