使用Angular 8在屏幕上显示Spinner直到从API加载数据

在开发Web应用程序时，常常需要从后端API获取数据来渲染UI。在此过程中，用户需要等待数据加载完成，而不是看到空白的页面或卡顿。为了提供更好的用户体验，我们可以使用Spinner来指示数据加载的进度。

在本文中，我们将学习如何使用Angular 8在屏幕上显示Spinner，直到从API获取数据。我们将使用Angular Material库提供的Spinner组件来实现这一目标。

步骤

以下是如何使用Angular Material Spinner来实现数据加载指示器的步骤。

安装Angular Material

首先，我们需要安装Angular Material库。可以使用以下命令安装它：

npm install --save @angular/material

然后，在根模块中导入Angular Material模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, MatProgressSpinnerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

创建Spinner组件

现在，我们可以创建一个名为SpinnerComponent的新组件，它将负责在屏幕上显示Spinner。

ng generate component spinner

打开SpinnerComponent的模板文件，并添加以下HTML代码：

<mat-spinner *ngIf="showSpinner"></mat-spinner>

此代码使用Angular的ngIf指令来控制Spinner的显示。我们将在组件中定义一个布尔变量showSpinner，以确定API是否已经返回数据。如果API还没有返回数据，Spinner将被显示。

回到组件的类文件中，并在导入中添加以下代码：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit {
  showSpinner = true;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.getData();
  }

  getData() {
    this.apiService.getData().subscribe((data) => {
      // do something with the data
      this.showSpinner = false;
    });
  }
}

这里我们首先导入了一个名为ApiService的服务，它将从API获取数据。然后我们定义了一个名为showSpinner的布尔变量，并将其初始化为true，以便在加载数据时显示Spinner。

在组件类中我们实现了一个getData()方法，用于调用API获取数据。在订阅数据时设置showSpinner为false，以隐藏Spinner。

使用Spinner组件

现在，我们可以在AppComponent的模板文件中使用Spinner组件。

<app-spinner></app-spinner>

总结

在本文中，我们学习了如何使用Angular Material库提供的Spinner组件来显示API数据加载进度。我们首先安装了Angular Material库，然后创建了一个新的SpinnerComponent组件并在其中使用了MatSpinner指令。最后，我们在AppComponent的模板文件中使用了Spinner组件。

现在，当我们从API获取数据时，如果数据尚未返回，Spinner将显示在屏幕上，直到数据返回。这将为用户提供更好的体验，并避免他们看到空白页面。

参考代码如下：

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit {
  showSpinner = true;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.getData();
  }

  getData() {
    this.apiService.getData().subscribe((data) => {
      // do something with the data
      this.showSpinner = false;
    });
  }
}