RxJS：如何在skipUntil中使用流内参数并保持链式结构？

方法1：用mergeMap关联按钮与点击流 #

先创建按钮，然后通过mergeMap将按钮转换为点击事件流，同时把按钮对象传递到后续操作中，全程保持链式结构：

import { of, fromEvent } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';

// 假设createButton是你的按钮创建函数
of(createButton())
  .pipe(
    mergeMap(button => 
      fromEvent(button, 'click').pipe(map(() => button))
    ),
    // 后续操作直接拿到按钮对象
    map(button => {
      console.log('按钮已点击，对象：', button);
      return button;
    })
  )
  .subscribe();

这种方式避免了嵌套，把按钮的创建和点击监听整合在同一条链里，点击后直接把按钮传递下去供后续使用。

方法2：结合tap和skipUntil实现等待 #

如果偏好skipUntil的写法，可以先通过tap缓存按钮引用，再用这个引用创建点击流传给skipUntil：

import { of, fromEvent } from 'rxjs';
import { tap, skipUntil } from 'rxjs/operators';

let buttonRef;

of(createButton())
  .pipe(
    tap(button => buttonRef = button),
    skipUntil(fromEvent(buttonRef, 'click')),
    tap(button => console.log('点击完成，继续执行', button))
  )
  .subscribe();

这里tap只是缓存按钮对象，不改变流的发射值，skipUntil会等待点击事件触发后，才让源流的按钮值继续往下走。

方法3：用defer动态生成点击流 #

defer可以延迟Observable的创建时机，直到订阅发生时才执行函数，这样就能拿到之前创建的按钮对象：

import { of, fromEvent, defer } from 'rxjs';
import { skipUntil } from 'rxjs/operators';

let buttonRef;

of(createButton())
  .pipe(
    skipUntil(defer(() => fromEvent(buttonRef, 'click'))),
    map(button => {
      console.log('点击后继续处理按钮：', button);
      return button;
    })
  )
  .subscribe(button => buttonRef = button);

补充说明 #

skipUntil本身只接受Observable参数，不支持函数，所以需要借助defer或者映射操作符来动态生成依赖于源值的Observable。上面几种方法都能避免嵌套的switchMap，保持链式结构的清晰。

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