RxJS：如何合并初始可能未定义的两个Observable并自动订阅？

问题场景 #

给定两个数据源，其中一个依赖Angular ViewChild的引用（该引用会在未来某个未知时间点初始化），需要用combineLatest合并二者：

const observable1 = interval(100);
const observable2 = this.ref?.observable; // this.ref是ViewChild引用，初始未定义

combineLatest([observable1, observable2]).subscribe(...)

需求：当this.ref初始化完成后，立即订阅其observable并与observable1合并输出，无需提前预知this.ref的初始化时间。

简洁解决方案 #

方案1：利用Angular ViewChild的setter监听引用变化（推荐） #

直接通过ViewChild的setter捕获引用初始化事件，将目标Observable存入Subject，再与observable1合并：

import { Component, ViewChild } from '@angular/core';
import { interval, combineLatest, BehaviorSubject, filter, switchMap } from 'rxjs';

@Component(/* 组件元数据 */)
export class YourComponent {
  private observable2Subject$ = new BehaviorSubject<Observable<any> | null>(null);
  private observable1$ = interval(100);

  @ViewChild('ref', { static: false }) 
  set ref(val: YourRefType) {
    if (val) {
      this.observable2Subject$.next(val.observable);
    }
  }

  ngOnInit() {
    combineLatest([
      this.observable1$,
      this.observable2Subject$.pipe(
        filter(obs => obs !== null),
        switchMap(obs => obs)
      )
    ]).subscribe(([val1, val2]) => {
      // 处理合并后的输出值
    });
  }
}

这个方案完全利用Angular的生命周期机制，无需轮询，性能更优，同时TypeScript类型推断会更准确。

方案2：用defer+repeatWhen动态获取Observable #

如果无法使用ViewChild setter，也可以通过defer动态尝试获取目标Observable，配合repeatWhen直到引用存在：

import { interval, combineLatest, defer, EMPTY, repeatWhen, take } from 'rxjs';

const observable1$ = interval(100);
const observable2$ = defer(() => this.ref?.observable ?? EMPTY).pipe(
  repeatWhen(() => interval(10)), // 每隔10ms检查一次引用状态
  take(1) // 拿到有效Observable后停止重试
);

combineLatest([observable1$, observable2$]).subscribe(([val1, val2]) => {
  // 处理合并后的输出值
});

原方案的问题分析 #

你之前的实现逻辑复杂且存在TypeScript类型错误，核心问题在于：

• 依赖observable1的发射来轮询检查this.ref状态，导致逻辑冗余；
• combineLatestWith中使用this.ref?.observable ?? EMPTY会让TypeScript推断出联合类型，引发类型不兼容问题；
• 多层switchMap嵌套进一步增加了逻辑复杂度和类型推断难度。

内容的提问来源于stack exchange，提问作者Robin Southgate