如何在Angular中合并Signal数组类型的Signal（类似mergeAll）？

问题分析 #

你尝试的两种方法都存在明显问题：

1. 第一种方法仅在latest_state初始化时读取了all_the_states的初始值，后续all_the_states动态增删元素时，不会重新触发合并逻辑，因此latest_state始终保持初始的null。
2. 第二种方法在map回调中调用toObservable()，该回调不在Angular的注入上下文（如构造函数、工厂函数）中执行，因此触发NG0203错误。

解决方案 #

方案1：结合RxJS实现（推荐） #

利用toObservable监听all_the_states的变化，通过switchMap在数组更新时重新合并内部Signal对应的Observable，最后转成Signal：

import { toObservable, toSignal, signal } from '@angular/core';
import { merge, switchMap, EMPTY } from 'rxjs';

@Component({
  // 组件元数据
})
export class YourComponent {
  all_the_states = signal([] as Signal<any>[]);

  latest_state = toSignal(
    toObservable(this.all_the_states).pipe(
      switchMap(signals => {
        // 将每个内部Signal转为Observable
        const observables = signals.map(signal => toObservable(signal));
        // 若数组为空，返回空Observable避免无意义订阅
        return observables.length ? merge(...observables) : EMPTY;
      })
    ),
    { initialValue: null }
  );

  // 示例：添加新的Signal到数组
  addState(newSignal: Signal<any>) {
    this.all_the_states.mutate(arr => arr.push(newSignal));
  }
}

方案2：纯Signal API实现（无需RxJS） #

通过effect监听all_the_states的变化，以及每个内部Signal的更新，手动维护latest_state的最新值：

import { signal, effect } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent {
  all_the_states = signal([] as Signal<any>[]);
  latest_state = signal<any>(null);

  constructor() {
    effect(() => {
      const currentSignals = this.all_the_states();
      // 为每个内部Signal创建监听effect
      const subEffects = currentSignals.map(signal => {
        return effect(() => {
          // 当内部Signal值变化时，更新latest_state
          this.latest_state.set(signal());
        });
      });

      // 当all_the_states变化时，销毁之前的监听effect，避免内存泄漏
      return () => {
        subEffects.forEach(eff => eff.destroy());
      };
    });
  }

  // 示例：添加新的Signal到数组
  addState(newSignal: Signal<any>) {
    this.all_the_states.mutate(arr => arr.push(newSignal));
  }
}

说明 #

• 方案1借助RxJS的switchMap自动管理订阅生命周期，当all_the_states更新时，会取消之前的合并订阅，重新订阅新的Observable集合，逻辑更简洁。
• 方案2纯用Angular Signal API，适合不想引入RxJS的场景，但需要手动清理订阅，避免内存泄漏。

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