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

任务是在页面上显示微调框，直到来自API的响应出现为止。在这里，我们将制作一个简单的CSS微调器，将其加载到API的数据来了您也可以选择自举程序微调器，也可以自己制作微调器。

先决条件：您将需要一些知识，以便从API发出Http get()请求并获取数据。

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

方法：

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

  ng new app_name
  ng g c component_name

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

  这里的微调器定义为：

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

  • 在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); }
      }
    

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

    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 }}
    

  • show-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”