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

在Angular应用程序中，路由是非常重要的一部分，因为它使得使用者可以从一个页面到另一个页面导航。在使用Angular的路由时，可能会出现导航时应用程序卡顿或加载过慢的情况。为了提高用户体验，我们可以在路由之间导航时显示一个加载屏幕，让用户知道应用程序正在加载。

下面将介绍如何使用Angular在路线之间导航时显示加载屏幕：

安装ng-busy

ng-busy 是一个Angular插件，可以轻松的在应用程序中添加加载屏幕。我们可以通过npm安装ng-busy：

npm install ng-busy --save

导入NgModule

在 app.module.ts 文件中引入 ng-busy 模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BusyModule } from 'ng-busy';
import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BusyModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

在模板中使用

在模板中，使用 busy 指令，并传递控制器。控制器是一个 Observable，表示 loading 状态。例如，在 AppComponent 模板中，加载屏幕将被显示在整个应用程序收到 HTTP 请求且响应未完成之前。

<ng-busy [busy]="observable">
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</ng-busy>

创建loading控制器

在你的应用程序中，你可以通过创建 Observable 来控制 loading 状态。例如，在 MyAppService 中，你可以通过如下方式创建loadingController 。

import { Injectable } from '@angular/core';
import { ReplaysSubject } from 'rxjs/ReplaySubject';

@Injectable()
export class MyAppService {
  private loadingController = new ReplaysSubject<boolean>(1);
  public loading = this.loadingController.asObservable();
  
  constructor() {}
  
  startLoading() {
    this.loadingController.next(true);
  }
  
  stopLoading() {
    this.loadingController.next(false);
  }
}

在上面的代码中，我们创建了一个 ReplaysSubject（可重复使用的 Observable），称为 loadingController。在我们的服务中，我们使用两个方法，即 startLoading 和 stopLoading 。当开始加载时， startLoading() 方法会将 true 发布到 loadingController，当停止加载时， stopLoading() 会发布 false 。

钩子函数中使用loading控制器

在你的应用程序中，你可以通过钩子函数来控制 loading 状态。例如，在 AppComponent 中，我们可以监听路由事件，并在每次路由事件发生时启动和停止加载状态。以下是一个示例：

import { Component } from '@angular/core';
import { NavigationStart, NavigationEnd, NavigationCancel, NavigationError, Event as NavigationEvent, Router } from '@angular/router';
import { MyAppService } from './app.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(private router: Router, private myService: MyAppService) {
    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        myService.startLoading();
      } else if (event instanceof NavigationEnd ||
                 event instanceof NavigationCancel ||
                 event instanceof NavigationError) {
        myService.stopLoading();
      }
    });
  }
}

在上述代码中，我们监听了路由事件并根据路由事件的不同状态启动和停止加载状态。例如，当 NavigationStart 事件被触发时，我们调用 myService 的 startLoading 并启动加载状态。当 NavigationEnd， NavigationCancel 和 NavigationError 事件触发时，我们调用 myService 的 stopLoading 和停止加载状态。

总结

使用Angular的ng-busy插件可以轻松的在应用程序中创建加载屏幕，在路上之间导航时显示。我们可以通过控制loading控制器来管理加载状态，并在钩子函数中启动和停止加载状态。让用户在等待的时候也更舒适。