如何使用Angular 8在屏幕上显示旋转器，直到从API加载数据

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

在这里，你将需要一个API来获取数据。一个假的API也可以被创建，数据可以被用来显示。我们已经有了一个假的API，其中包含以下数据。

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

步骤:

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

    ng new app_name
    ng g c component_name

在component.html文件中，制作一个ID为loading的对象。

在这里，旋转器被定义为。

    <div class="d-flex justify-content-center">
      <div class="spinner-border" role="status" >
        <span class="sr-only" id="loading"></span>
      </div>
    </div>

你可以用你的方式制作一个旋转器。

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

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

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

        <h1>GeeksforGeeks</h1>
          
        <!-- spinnner element is 
            defined with id loading -->
        <div class="d-flex justify-content-center">
            <div class="spinner-border" role="status">
                <span class="sr-only" id="loading"></span>
            </div>
        </div>
          
        <!-- data from API is displayed  -->
        <h2>{{ dataDisplay }}</h2>

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

输出:

运行开发服务器以查看输出

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