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

任务是在页面上显示一个微调器，直到来自 API 的响应到来。在这里，我们将制作一个简单的 CSS 微调器，它将加载到 API 中的数据来了。您也可以使用 bootstrap spinner 或自己制作 spinner。

先决条件：您需要一些知识来从 API 发出 Http get() 请求和获取数据。

在这里，您将需要一个用于获取数据的API 。还可以创建一个虚假的 API，并可以使用数据来显示。我们已经有一个包含以下数据的虚假 API：

方法：

• 所需的 Angular 应用程序和组件已创建。

  ng new app_name
  ng g c component_name

• 在 component.html 文件中，创建一个带有 id加载的对象。

  这里 Spinner 定义为：

  您可以按照自己的方式制作微调器。

  • 在 component.css 文件中，给 spinner 你想要的样式。

    这里微调器的样式为：

    #loading{
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
      }
      
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    

  • 通过发出 get 请求从 API 获取数据。
  • 从 API 获取数据后，将其存储在Response 变量中。
  • 有一个if 语句可以检查是否来自 API 的响应来了。
  • 如果 Response 来了，那么就会调用一个函数hideloader()。
  • 在使用 DOM 操作的hideloader()函数，我们将加载元素的显示设置为无。

    document.getElementById('loading').style.display = 'none';

  • 为了更清楚地获取数据，我使用插值数据绑定将获取的数据显示为 HTML。

  代码实现

  • app.module.ts

    import { BrowserModule } from 
        '@angular/platform-browser';
      
    import { NgModule } from 
        '@angular/core';
      
    import { HttpClientModule } from 
        '@angular/common/http';
      
    import { FormsModule } from 
        '@angular/forms';
      
    import { AppRoutingModule } from 
        './app-routing.module';
      
    import { AppComponent } from 
        './app.component';
      
    import { ShowApiComponent } from 
        './show-api/show-api.component';
      
    @NgModule({
        declarations: [
            AppComponent,
            ShowApiComponent,
        ],
        imports: [
            BrowserModule,
            AppRoutingModule,
            HttpClientModule,
            FormsModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    

  • show-api.component.html

    GeeksforGeeks
      
    
    
        
    
            
        
    
      
    
    {{ dataDisplay }}
    

  • 显示 api.component.css

    #loading{
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 1;
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border: 16px solid #f3f3f3;
      border-radius: 50%;
      border-top: 16px solid #3498db;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
      }
        
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    

  • show-api.component.ts

    import { Component, OnInit } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    @Component({
        selector: 'app-show-api',
        templateUrl: './show-api.component.html',
        styleUrls: ['./show-api.component.css']
    })
    export class ShowApiComponent implements OnInit {
        dt: any;
        dataDisplay: any;
        constructor(private http: HttpClient) {
        }
      
        ngOnInit(): void {
            this.http.get(
    'http://www.mocky.io/v2/5ec6a61b3200005e00d75058')
                .subscribe(Response => {
                      
                    // If Response comes function
                    // hideloader() is called
                    if (Response) {
                        hideloader();
                    }
                    console.log(Response)
                    this.dt = Response;
                    this.dataDisplay = this.dt.data;
                });
            // Function is defined
            function hideloader() {
      
                // Setting display of spinner
                // element to none
                document.getElementById('loading')
                    .style.display = 'none';
            }
        }
    }
    

  输出：

  运行开发服务器查看输出

  

  API链接：“ http://www.mocky.io/v2/5ec6a61b3200005e00d75058”