Question

我有一个以http请求开头的流：

this.myService.getData()

获取数据后，我有一个过滤运算符：

.filter(() => boolean)

在此过滤器中，我要等待用户的回答，例如“您要继续吗？”然后，用户单击“是”或“否”。

如果用户单击“是”，则流继续输入数据。

如果用户单击“否”，则过滤器将执行其工作。

它可以与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);
      });
  }

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

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

1 个答案: