使用switchMap搭配combineLatest处理动态组件QueryList为何失效？

我有一个包含QueryList的组件：

@ViewChildren(MyComponent) children!: QueryList<MyComponent>;

每个子组件都有一个名为instance$的可观察属性，我在ngAfterViewInit中编写了如下代码：

ngAfterViewInit() {
  combineLatest(
    this.children.toArray().map(component => component.instance$)
  ).pipe(
    first()
  ).subscribe((instances: any[]) => {
    this.instances = instances;
  });
}

这段代码运行良好，但我接下来需要实现动态添加子组件的功能，因此需要用到QueryList.changes可观察对象。于是我添加了以下代码：

ngAfterViewInit() {
  // 原有代码...

  this.children.changes.pipe(
    switchMap(() => {
      const observables = this.children.toArray().map(component => component.instance$);
      return combineLatest(observables);
    }),
  ).subscribe((instances: any[]) => {
    this.instances = instances;
  });
}

但订阅函数似乎从未被触发……为什么combineLatest在这里不起作用？

更新 #

我发现改用以下方式可以实现功能：

this.children.changes.subscribe((children) => {
  const instances: any[] = [];
  const fetchInstanceFor = async (child: any) => {
    const instance = await firstValueFrom(child.instance$);
    return instance;
  };
  children.forEach((child: any) => {
    instances.push(fetchInstanceFor(child));
  });
  this.instances = instances;
});

但这种方式看起来非常糟糕。有没有更好的方法？

为什么combineLatest没触发？ #

combineLatest的核心触发条件是传入的每一个可观察对象都至少发出过一次值。如果动态添加的子组件的instance$还未发出任何值，combineLatest就不会向下传递数据，导致订阅回调永远无法执行。

另外，原有代码中的first()只处理了初始子组件的第一次值，但动态添加新组件后，新组件的instance$可能还没完成首次发射，这也会阻碍combineLatest的触发。

更优雅的实现方式 #

可以结合startWith和combineLatest，同时处理初始子组件列表和后续的变化事件，确保每个instance$都能提供至少一个值：

import { combineLatest, startWith, switchMap, filter } from 'rxjs';

ngAfterViewInit() {
  // 先发射初始的子组件列表，再监听后续的变化
  this.children.changes.pipe(
    startWith(this.children),
    switchMap(childrenList => {
      const observables = childrenList.toArray().map(child => 
        // 给每个instance$添加startWith，确保即使还没发射值也能提供默认值
        // 这里的默认值可以根据业务场景调整，比如null或者空对象
        child.instance$.pipe(startWith(null))
      );
      return combineLatest(observables);
    }),
    // 可选：过滤掉所有值都为默认值的情况，避免不必要的赋值
    filter(instances => instances.some(instance => instance !== null))
  ).subscribe((instances: any[]) => {
    // 过滤掉默认值，得到实际的实例列表
    this.instances = instances.filter(instance => instance !== null);
  });
}

如果instance$是只会发射一次值的可观察对象（比如从Promise转换而来），也可以用forkJoin替代combineLatest，但要注意forkJoin需要所有可观察对象都完成后才会发射结果。如果instance$是长期活跃的可观察对象，还是combineLatest+startWith的组合更合适。

另外，建议优化类型定义，避免使用any：

// 假设MyComponent的instance$类型为Observable<InstanceType>
import { combineLatest, startWith, switchMap, filter } from 'rxjs';

ngAfterViewInit() {
  this.children.changes.pipe(
    startWith(this.children),
    switchMap(childrenList => 
      combineLatest(
        childrenList.toArray().map(child => child.instance$.pipe(startWith(null)))
      )
    ),
    filter(instances => instances.some(i => i !== null))
  ).subscribe(instances => {
    this.instances = instances.filter(i => i !== null) as InstanceType[];
  });
}

关于你更新的代码 #

你用firstValueFrom等待每个instance$的第一个值，但当前代码中this.instances存储的是Promise对象，而非实际的实例值。如果要继续用这种方式，需要用Promise.all等待所有Promise完成后再赋值：

this.children.changes.subscribe(async (children) => {
  const instances = await Promise.all(
    children.toArray().map(child => firstValueFrom(child.instance$))
  );
  this.instances = instances;
});

但这种方式依然不如RxJS操作符的实现优雅，因为RxJS能更好地处理异步流的取消、合并和组件生命周期管理（比如在组件销毁时自动取消订阅）。

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