如何迭代Observable<boolean>数组，发出特定值时终止执行？

我定义了如下TypeScript接口：

export interface IClickHandler {
  index: number; // 调用顺序从0开始
  handleClick$(event: any): Observable<boolean>;
}

此前的同步方法定义为：

handleClick(event: any): boolean;

因此我在每个处理器中新增了handleClick$方法，内部调用原同步方法：

public handleClick$(evt: any): Observable<boolean> {
  return new Observable(subscriber => {
    const isHandled = this.handleClick(evt);
    subscriber.next(isHandled);
    subscriber.complete();
  });
}

组件中包含如下数组字段和原同步处理方法：

private handlers: IClickHandler[] = [];

原方法会依次执行每个handler的handleClick，直到某个handler返回true就终止：

public handleControlClick(event: any) {
  // 数组顺序保证调用顺序
  for (const handler of this.handlers) {
    if (handler.handleClick(event)) {
      break;
    }
  }
}

现在需要将上述同步逻辑适配为基于Observable<boolean>的异步逻辑，该如何实现？

可以利用RxJS的操作符实现按顺序执行、遇true即终止的逻辑，核心思路是通过concatMap保证处理器的调用顺序，结合takeWhile控制执行流程：

方案1：返回Observable供调用者订阅（推荐） #

这种方式保留了RxJS的异步特性，让调用者可以灵活处理订阅、错误等情况：

import { from } from 'rxjs';
import { concatMap, takeWhile } from 'rxjs/operators';

public handleControlClick(event: any): Observable<boolean> {
  return from(this.handlers).pipe(
    // 按顺序执行每个handler的handleClick$，等待前一个执行完成再执行下一个
    concatMap(handler => handler.handleClick$(event)),
    // 只要返回false就继续执行，返回true则终止流程；inclusive: true会保留这个true值
    takeWhile(isHandled => !isHandled, { inclusive: true })
  );
}

方案2：内部直接执行（无返回值） #

如果不需要对外暴露Observable，也可以在方法内部完成订阅：

import { from } from 'rxjs';
import { concatMap, takeWhile } from 'rxjs/operators';

public handleControlClick(event: any): void {
  from(this.handlers).pipe(
    concatMap(handler => handler.handleClick$(event)),
    // 遇true即停止，不需要保留该值时可以省略inclusive参数
    takeWhile(isHandled => !isHandled)
  ).subscribe({
    error: (err) => {
      // 可在这里添加错误处理逻辑
      console.error('处理器执行出错:', err);
    }
  });
}

逻辑说明 #

• from(this.handlers)：将处理器数组转换为Observable序列，保证按数组顺序发出每个handler
• concatMap：确保前一个handler的handleClick$执行完成（Observable完成）后，再执行下一个，完美匹配原同步逻辑的顺序性
• takeWhile：判断是否继续执行后续处理器：返回!isHandled意味着只要当前处理器返回false，就继续执行下一个；一旦返回true，立即终止整个流程

该方案既适配了当前同步的handleClick$实现，也支持未来将handleClick$改为真正异步的场景（比如包含HTTP请求、定时器等）。

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