如何在屏幕上显示 Spinner 直到 API 中的数据使用 Angular 8 加载？

在 Angular 应用程序中，当加载 API 数据时，通常需要显示进度指示器或 Spinner，以便用户知道应用程序正在进行某些操作并且加载数据需要一些时间。下面将介绍如何实现在屏幕上显示一个 Spinner 直到 API 中的数据使用 Angular 8 加载。

步骤

1. 首先，需要在 Angular 应用程序中安装 ngx-spinner。可以使用以下命令来安装 ngx-spinner：

npm install ngx-spinner --save

2. 在 app.module.ts 文件中导入 ngx-spinner 并将它添加到 AppModule 的 providers 属性中：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxSpinnerModule } from 'ngx-spinner';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    NgxSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 创建一个服务类，该类将负责从 API 获取数据。在该服务类中添加一个名为 getData() 的方法来从 API 获取数据：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('/api/data');
  }
}

4. 创建一个组件类，该类将显示 Spinner 并从 DataService 获取数据。要显示 Spinner，需要导入和使用 ngx-spinner：

import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: `
    <div *ngIf="showSpinner" ngxSpinner="spinner"></div>
    <div *ngIf="!showSpinner">
      <ul>
        <li *ngFor="let item of data">{{ item }}</li>
      </ul>
    </div>
  `
})
export class DataComponent implements OnInit {

  data: Array<any>;
  showSpinner: boolean = true;

  constructor(private dataService: DataService, private spinner: NgxSpinnerService) { }

  ngOnInit() {
    this.spinner.show();
    this.dataService.getData().subscribe((data: Array<any>) => {
      this.data = data;
      this.spinner.hide();
      this.showSpinner = false;
    });
  }
}

在组件模板中使用了 *ngIf 指令来显示/隐藏 Spinner 和数据。如果 showSpinner 属性为 true，Spinner 将显示出来。如果 showSpinner 属性为 false，则显示数据。

5. 在 app.component.html 中使用 DataComponent 来显示数据：

<app-data></app-data>

结论

现在，你应该已经了解了如何在屏幕上显示 Spinner 直到 API 中的数据使用 Angular 8 加载。要实现此目标，我们使用了 ngx-spinner 和 Angular HttpClient。这是一种非常普遍的加载数据方式，可以改善用户体验，因为用户可以看到进度指示器，知道正在加载数据。