Angular 8 如何在数据从API加载完成前在屏幕上显示旋转图标

在本文中，我们将学习如何使用Angular 8和HTTPClient服务从一个虚拟的待办事项API中获取数据，在数据加载完成前在屏幕上显示一个Spinner。

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

让我们使用这个框架，通过一个示例来理解如何有条件地显示一个Spinner组件。

先决条件

在执行下面的步骤之前，请确保您的系统上已安装了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">

此代码将在DOM中添加我们所需的旋转器所需要的HTML。

步骤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);
   }
}

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

步骤5

现在让我们使用这个组件，在等待从 API 加载数据时显示 spinner。打开 “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>