防止用户单击按钮，直到服务响应 angular 7 rxjs

Question

我正在寻找有效的解决方案，以避免用户一次又一次地单击提交按钮，直到他们从后端 API 得到响应。

我想过以下解决方案，但正在寻找任何其他方法来处理这个问题。

1. 使用 loader 将禁用整个 html，直到我们得到一些响应。

2. 使用exhaustmap避免多次http调用

3. 使用throttletime 将手动不允许用户点击特定时间段。

如果我们可以使用任何其他解决方案，请指导我。

Answer 1

您可以禁用按钮本身，直到通过组件的控制器文件中的标志获得响应为止。

// 在组件的控制器中

loading = false;
.
...
submit(): void {
  loading = true;
  this.someserive.getData().pipe(finalize(() => this.loading = false).subcribe(...
  .
  ....
}

// 在组件的模板中

<button [disabled]="loading" (click)="submit()">Submit</button>

Answer 2

exhaustMap()在这种情况下，我建议将其用作主要解决方案。在模板中：

<button (click)="submitForm()">Submit</button>

然后在您的组件中：

submit$: Subject<boolean> = new Subject();

constructor() {
  this.submit$.pipe(
    exhaustMap(() => this.http.get("api/endpoint"))
  ).subscribe(res => {});
}

submitForm() {
  this.submit$.next(true);
}

您单击“提交”，exhaustMap()操作员将忽略所有正在进行的单击事件，直到 HttpClient 实例返回响应并完成。