Question

我如何让这两个可观察变量streamA$和streamB$与点击事件同时运行？

我得到的代码无法正常工作：如果我单击A，然后在A仍在进行时单击B，则B取消A，反之亦然。如何并行放置2个，所以如果在A进行中单击B，A继续并将结果分配给images$，那么如果B完成后，它将替换images $，因此2个结果将依次出现。然后，我可以使用waitUntil，filters等来管理2个流。

  ngOnInit() {
    this.streamA$ = this.streamService.getStream(1);
    this.streamB$ = this.streamService.getSlowStream(2);
  }

  clickA() {
    this.images$ = this.streamA$;
  }

  clickB() {
    this.images$ = this.streamB$;
  }

模板，通过异步方式订阅images $

<div class="section">
    {{images$ | async}}
</div>

Answer 1

您可以设置队列主题并流式传输concatMap，它将按顺序处理，并且不会错过任何点击。

private queue = new Subject()
public images$ = queue.pipe(concatMap(res => res))

clickA(){
  this.queue.next(this.streamA$)
}

clickB(){
  this.queue.next(this.streamB$)
}

https://stackblitz.com/edit/angular-z4zmd6

使用2个可观察变量和1个可观察输出变量

1 个答案: