Question

我正在尝试使用多种方法进行服务-每个方法都会返回管道。一次只能调用一种方法。否则，应该发生管道切换。

这是我如何实现它的一个示例-https://stackblitz.com/edit/rxjs-3pry8u?devtoolsheight=60。它看起来太复杂了，有潜在的内存泄漏，但是它可以工作。如果您尝试快速单击“设为红色” /“设为绿色” /“设为蓝色”按钮，则只会触发最后一个（请参见console.log）。

根据要求-控制管道在Color内部而不是外部运行很重要。我可以想象如何用外部方法解决它：我可以将所有click事件合并到一个管道中并使用switchMap（）。但是对我来说很有趣-如何在Color类中正确解决此问题。

Answer 1

这是我在Color类中设法解决的方法：

我没有使用switchMap，因为我不会使用内部可观测对象。我也确实摆脱了makeRed，makeGreen和makeBlue函数。
我合并了所有事件并将debounceTime应用于它们。

Color
 .mergeEvents (events: Observable<any>[]) {
    merge<State>(...events)
    .pipe(
      debounceTime(500),
    )
    .subscribe(c => {
      console.log(c)
      this.state$.next(c);
    })
  }

const color = new Color();

color.mergeEvents([
  fromEvent(document.getElementById("make-red"), "click").pipe(mapTo({ color: 'red' })),
  fromEvent(document.getElementById("make-green"), "click").pipe(mapTo({ color: 'green' })),
  fromEvent(document.getElementById("make-blue"), "click").pipe(mapTo({ color: 'blue' })),
]);

Here is a StackBlitz demo。

一次仅运行一根管道

1 个答案: