xhr 请求正在进行时的角度 2/5 加载指示器

Question

在进行 xhr 请求时，加载指示器有很多实现。有些做整页覆盖，有些在屏幕上的指定位置显示一条消息等等......

我想创建一个紧凑的解决方案，我可以在多个项目中反复使用它，占用空间少，额外工作量最少。为了这个目标，我决定在被点击的按钮内实现加载指示器。

例如，如果按钮的标题为“SAVE”，则单击此按钮后，我希望该按钮在“SAVE”一词旁边显示一个微调器图标，同时会发生以下情况：

1) 按钮会立即被禁用，因此忽略它的新点击。

2) 一个加载指示器（一个旋转的 gif）开始出现在“SAVE”这个词的左边，并且这个微调器继续旋转直到 XHR 返回一个响应

3) 当 XHR 响应时，按钮再次启用

由于微调器发生在按钮内，因此占用空间为 0。由于微调器发生在按钮内，因此无需在 HTML 中创建特殊的<div> 的开销。

有人可以与我分享我需要学习的主题吗？

我知道 XHR 部分和 angular 的（点击）事件的东西。

我需要帮助的地方是管理该微调器的出现和消失以及使该按钮处于活动或不活动状态......

我知道解决方案是围绕 ngStyle、ngClass、mat-icons 和按钮的 [disabled] 指令，但我无法完全理解它。

Answer 1

正如评论中提到的，你知道困难的部分。但是，让我们完成这些步骤。

从 Angular 的角度来看，这里有几件事：

• 您的按钮带有 (click) 处理程序和 [disabled] 属性，
• 某种<div class="spinner"/>标签，
• 调用某个后端的服务。

现在，算法是：

• “加载”开始时，禁用按钮并显示微调器，
• “加载”结束时，重新启用按钮，隐藏微调器。

所以，让我们假设您的服务是微不足道的：

class MyService {
  constructor(private http: HttpClient) {}

  loadResults() {
    return this.http.get('/api/endpoint');
  }
}

它将返回一个 observable，它要么成功，要么失败（或挂起，但这是一个 different 问题）。

让我们解决我们的任务。一、按钮（点击）处理程序：

<button (click)="getResults()">Get results</button>

现在，您的组件必须加载结果并处理它们。但如果我们已经在进行加载，则不会。因此，它还可以更新“加载”属性。

getResults() {
  if (!this.loading) {
    return;
  }
  // otherwise set `loading` flag
  this.loading = true;
  this.myService.loadResults()
    .subscribe(results => this.results = results)
    // trigger this even if we fail
    // note: you might need to import finally operator
    .finally(() => this.loading = false); 
}

所以，现在我们在组件上有一个布尔 loading 标志。太好了，让我们在组件、按钮和微调器上使用它。

<!-- set disabled property depending on the loading status -->
<button (click)="getResults()" [disabled]="loading">Get results</button>

<!-- add "hidden" class depending on the loading status -->
<div class="spinner" [ngClass]="{ hidden: loading }"></div>

现在你应该准备好了。

编辑：根据您的评论，您的微调器位于 <button> 标记本身内。此外，您想使用 HTML hidden 属性，而不是 hidden css 类。这也是可能的，代码可以是这样的：

<button class="login-button" (click)="checkData()">
  <i [hidden]="!isLoading" class='material-icons'>spinner</i>
  <span [hidden]="isLoading">Log In <i class='material-icons'>arrow_forward</i></span>
</button>

或者，您甚至可以从 DOM 中完全删除元素：

<button class="login-button" (click)="checkData()">
  <i *ngIf="loading" class='material-icons'>spinner</i>
  <span *ngIf="!loading">Log In <i class='material-icons'>arrow_forward</i></span>
</button>