Rxjs，如何暂停流并等待用户点击

Question

我有一个由 http 请求开始的流：

this.myService.getData()

拿到数据后，我有一个过滤算子：

.filter(() => boolean)

在此过滤器中，我想等待用户的回答，例如 'Do you want to continue ?' 然后用户单击 'Yes' 或 'No'。

如果用户点击 'Yes'，则数据流会继续。

如果用户点击 'No'，则过滤器会完成它的工作。

它与 confirm() 本机函数一起工作正常，但我需要一个自定义模式，我不会使用像 @angular/material 这样的包，因为我想知道如何从头开始。

我很确定在流中使用 Promise 东西是一个好方法。

你是怎么解决的？

Answer 1

在您的组件上初始化一个主题，并在用户单击模式上的任何按钮时调用 .next() 函数。然后将 getData Observable 通过管道传输到 flatMap 并评估主题发出的下一个值。

public onModalButtonClick = new Subject<boolean>();
public openModal(): void {
    this.showModal = true;
    this.http.get('https://jsonplaceholder.typicode.com/todos/1').pipe(
      flatMap(data => {
        return this.onModalButtonClick.pipe(
          take(1),
          flatMap((bool) => bool? of(data) : throwError("abort button clicked"))
        )
      }),
      finalize(() => this.showModal = false)
    ).subscribe(data => {
        console.log(data);
      }, error => {
        console.log(error);
      });
  }

我做了一个简单的 blitzstack。您可能需要根据需要进行调整：https://stackblitz.com/edit/angular-zkx7kf?file=src%2Fapp%2Fhello.component.ts

Rxjs，如何暂停流并等待用户点击

Rxjs, how to pause the stream and wait the user click

angular

rxjs5