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

【问题标题】：Rxjs, how to pause the stream and wait the user clickRxjs，如何暂停流并等待用户点击
【发布时间】：2018-11-05 20:52:43
【问题描述】：

我有一个由 http 请求启动的流：

this.myService.getData()

得到数据后，我有一个过滤运算符：

.filter(() => boolean)

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

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

如果用户点击“否”，那么过滤器就会完成它的工作。

它适用于 confirm() 原生函数，但我需要一个自定义模式，我不会使用像 @angular/material 这样的包，因为我想知道如何从头开始。

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

请问你是怎么解决的？

【问题讨论】：

标签： angular rxjs5

【解决方案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

【讨论】：

完美，我不知道流会等待响应。只有一点：为什么我们必须添加 'take(1)' ？我尝试不使用，但效果不佳。
take(1) 只是获取下一个发出的值并在之后完成。由于 onModalButtonClick 主题永远不会完成，因此流在没有 take(1) 的情况下保持打开状态。如果您打开另一个模态并再次单击该按钮，则先前的数据流会再次发出数据，因为该流仍处于打开状态。
是的，我现在记得，我已经解决了这种问题。谢谢你的回答和细节