如何使用Angular 8在数据从API加载期间显示加载动画（Spinner）？

---

本文将学习如何在Angular 8中使用HTTPClient服务从模拟的todos API获取数据，并在数据加载期间在屏幕上显示加载动画。

Angular 8是一个构建Web应用程序的强大框架。它提供了许多功能，使创建动态且交互式的用户界面变得容易。

让我们使用该框架并通过一个示例了解如何有条件地显示加载动画组件。

前提条件

在继续以下步骤之前，请确保您的系统上已安装Angular CLI，因为我们在后续过程中将大量依赖它。

步骤 1

首先，我们将创建一个Angular应用程序，并为其命名。在本例中，我们将使用名称“my-app”。

ng new my-app
cd my-app

步骤 2

让我们创建一个新的组件来显示加载动画。使用以下命令生成一个新组件，并在“src/app”文件夹内创建一个名为“spinner”的新文件夹

ng generate component spinner

步骤 3

打开“spinner.component.html”文件并添加以下代码 -

<div class="spinner">

此代码将为我们需要的加载动画添加必要的HTML到DOM。

步骤 4

接下来，打开“spinner.component.css”文件并添加以下代码 -

.spinner {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border-top: 3px solid #3498db;
   border-right: 3px solid transparent;
   animation: spin 1s linear infinite;
}
@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}

这将创建一个加载动画，我们将在从服务器获取数据时显示它。

步骤 5

现在让我们使用此组件在等待从API加载数据时显示加载动画。打开“app.component.ts”文件并添加以下代码 -

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
   data: any;
   loading?: boolean;

   constructor(private http: HttpClient) { }

   async ngOnInit() {
      this.loading = true;
      await new Promise(resolve => setTimeout(resolve, 2000));
      this.http.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(response => {
         this.data = response;
         this.loading = false;
      });
   }
}

步骤 6

现在在您的应用程序模块中导入HttpClientModule。打开app.module.ts文件并粘贴以下代码 -

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SpinnerComponent } from './spinner/spinner.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
   declarations: [
      AppComponent,
      SpinnerComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

步骤 7

最后，打开“app.component.html”文件并添加以下代码 -

<div class="container">
   <div *ngIf="loading" class="spinner-container">
      <app-spinner></app-spinner>
   </div>
   <div *ngIf="!loading">
      <pre>{{ data | json }}</pre>
   </div>
</div>

结论

在本文中，我们学习了如何创建一个Angular 8应用程序，该应用程序在等待从API加载数据时在屏幕上显示加载动画。我们了解了如何使用HttpClient服务从API获取数据并在屏幕上显示它。我们还了解了如何使用CSS创建一个简单的加载动画，并在等待数据加载时显示它。