如何使用 Angular 8 在屏幕上显示旋转器，直到 API 加载数据?
在本文中，我们将学习如何在屏幕上显示旋转器，直到 API 加载数据，并使用 Angular 8 和 HTTPClient 服务从虚拟待办事项 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 创建一个简单的旋转按钮，并在等待数据加载时显示它。
