css - 当 xhr 请求正在进行时， Angular 2/5 加载指示器

Question

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

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

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

1) 按钮立即被禁用，因此对其的新点击将被忽略。

2) 加载指示器(旋转的 gif)开始出现在“SAVE”一词的左侧，并且此旋转器继续旋转，直到 XHR 返回响应

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

由于旋转器发生在按钮内，因此占用空间为 0。由于旋转器发生在按钮内，因此没有创建特殊 <div> 的开销。在 HTML 中..

有人可以与我分享我需要学习的主题才能实现这一目标吗？

我了解 XHR 部分和 Angular 的(点击)事件内容。

我需要帮助的是管理该微调器的出现和消失以及使该按钮处于事件或非事件状态...

我知道解决方案就在 ngStyle、ngClass、mat-icons 和按钮的 [disabled] 指令周围，但我无法全神贯注。

Answer 1

正如评论中提到的，你知道其中的难点。但无论如何，我们还是要完成这些步骤。

从 Angular 的 Angular 来看，这里有一些事情:

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

现在，算法是:

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

所以，我们假设您的服务很简单:

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

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

它将返回一个可观察的值，它要么成功，要么失败(或者挂起，但这是一个 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); 
}

所以，现在我们有一个 bool 值 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>