使用Angular在路线之间导航时如何显示加载屏幕？

在这篇文章中，我们将看到从一个组件导航到另一个组件时如何显示加载屏幕。当用户浏览路线时，该应用程序可能会与后端通信以加载一些有用的数据，并且可能会产生一些延迟。那时，如果用户在屏幕上看不到任何东西，他可能会认为该应用程序已损坏或客户端计算机出现问题。因此，有必要借助一些消息或加载动画来保持用户与应用程序的互动。

先决条件：必须安装NPM

环境设置：我们将创建一个简单的应用，该应用将在导航时模拟一些延迟，并在导航路线时显示加载微调框。让我们快速设置环境：

npm install -g @angular/cli
ng new 

项目结构：执行上述命令后，您将获得如下项目结构：

项目结构

现在执行以下命令：

cd 
ng serve -o

输出：打开http：// localhost：4200并检查是否正在加载默认的角度登陆页面。

请按照以下步骤操作：

• 步骤1：我们将从JSON文件而不是实际服务器中加载数据。在src / assets /中创建一个新文件data.json并添加以下数据。

  data.json：

  {
      "K.S. Williamson": 0,
      "S.P.D. Smith": 0,
      "M. Labuschagne": 0,
      "J.E. Root": 0,
      "V. Kohli": 0,
      "Babar Azam": 0,
      "H.M. Nicholls": 0,
      "C.A. Pujara": 0,
      "D.A. Warner": 0,
      "B.A. Stokes": 0,
      "Gerard Abood": 1,
      "Afzaal Ahmed": 1,
      "Mesbahuddin Ahmed": 1,
      "Tanvir Ahmed": 1,
      "Javed Akhtar": 1,
      "A. F. M. Akhtaruddin": 1,
      "Rizwan Akram": 1,
      "Jahangir Alam": 1,
      "Brian Aldridge": 1
  }

• 步骤2：要读取此数据，我们将使用angular的HttpClient模块。我们需要将其注册在文件app.module.ts中。

  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 this module
  import {HttpClientModule} from '@angular/common/http';
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule   // Register the module here
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

• 步骤3：现在创建两个新组件。我们将在这两者之间导航。

  ng generate component batsman
  ng generate component umpire

  它将为每个组件生成4个文件。我们将了解其中之一的代码。另一个将有类似的工作。在batsman.component.ts中，添加以下代码。

  蝙蝠侠

  import { HttpClient } from '@angular/common/http';
  import { Component, OnInit } from '@angular/core';
    
  @Component({
    selector: 'app-batsman',
    templateUrl: './batsman.component.html',
    styleUrls: ['./batsman.component.css']
  })
  export class BatsmanComponent implements OnInit {
    
    constructor(private http:HttpClient) { }
    batsman = []
    ngOnInit(): void {
      this.http.get('assets/data.json').subscribe(
        result => {
          setTimeout(() => {
            for (let key in result) {
              if (!result[key]) {
                this.batsman.push(key);
              }
            }
          }, 2000);
        }
      )
    }
    
  }
  

  首先，导入HttpClient类。我们已经在构造函数中创建了一个HttpClient对象作为依赖项注入。我们还初始化了一个空的蝙蝠侠数组。 HttpClient的get()方法将返回一个Observable ，该数据将返回数据作为其subscription(result_callback，error_callback)方法中的第一个参数。在回调中，我们模拟了2000 ms的延迟，并将名称推入0值。这意味着，一旦页面被加载，就会有2秒钟的延迟，并且将填充batsman数组。现在，将以下代码添加到batsman.component.html。

  batsman.component.html

  
      
  
          
        
  
    
  
      
          
              
          
      
  {{person}}
  
  

• 步骤4：有两个div标签。击球手数组为空时显示第一个。填充数组时将显示另一个。因此，直到未接收到数据，我们都将查看包含加载动画的第一个div。 Spinner-border类存在于Bootstrap中。因此，我们需要在项目中添加引导程序。如下编辑index.html文件。

  index.html

    
      
      Geeks For Geeks
      
      
      
      
      
    
    
      
      
      
      
      
      
    

• 步骤5：现在，将以下代码分别添加到umpires.component.ts和umpires.component.html。

  umpires.component.ts

  import { HttpClient } from '@angular/common/http';
  import { Component, OnInit } from '@angular/core';
  import { CricketService } from '../cricket.service';
    
  @Component({
    selector: 'app-umpires',
    templateUrl: './umpires.component.html',
    styleUrls: ['./umpires.component.css']
  })
  export class UmpiresComponent implements OnInit {
    
    constructor(private http:HttpClient) { }
    umpires = [];
    ngOnInit(): void {
      this.http.get('assets/data.json').subscribe(
        result => {
          setTimeout(() => {
            for (let key in result) {
              if (result[key]) {
                this.umpires.push(key);
              }
            }
          }, 2000);
    
        }
      )
    }
    
  }
  

  umpires.component.html

  
      
  
          
        
   
  
    
  
      
          
              
          
      
  {{person}}
  
  

• 步骤6：在app-routing.module.ts中为这些组件创建路由，如下所示：

  app-routing.module.ts

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { BatsmanComponent } from './batsman/batsman.component';
  import { UmpiresComponent } from './umpires/umpires.component';
    
  const routes: Routes = [
    {path:'batsman', component:BatsmanComponent},
    {path:'umpires', component:UmpiresComponent}
  ];
    
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  

• 步骤7：在“ path ”键中添加路径，并在“ component ”键中添加相应的组件。导入必要的组件。现在，在app.component.html中为用户创建链接，编码部分完成：

  app.component.html

  
    Batsman ||
    Umpires
    
  
  

  上面的代码创建了两个链接，可以链接到相应的组件。 标记显示导航的组件。

运行以下命令：

ng serve -o

输出：