Angular路由: 如何在路由导航之间页面加载时显示loading加载动画效果

当使用 守卫,或者使用解析器读取数据时,我们可以利用导航到路由以及显示组件的这段时间,显示一段效果。让用户知道,后台正在进行一些事情,而不是点击之后毫无反应,这将大大的改善用户体验。

本文的目的是向您展示如何在从一个路由导航到另一个路由时显示效果。

Demo应用

我们将从一个demo应用开始,如下所示:
Angular路由: 如何在路由导航之间页面加载时显示loading加载动画效果

最后得到的应用程序如下所示:
Angular路由: 如何在路由导航之间页面加载时显示loading加载动画效果

我们希望在每个导航开始时显示一个进度条,并在导航完成时隐藏它。

angular路由器服务允许我们访问Observable通过events。我们可以订阅这个观察者对象,并根据事件的类型采取相应的行动。

如果您想继续下去,可以从Github下载或者克隆demo应用

git clone https://github.com/ahasall/angular-routing-events-demo.git
cd angular-routing-events-demo
npm install

监听路由事件

让我们通过route events监听AppComponent。我们希望在每个路由都能显示loading,因此我们必须侦听根组件中的导航事件。当然如果你是想我做的更复杂的后台管理系统,也可以在下级监听。

ts:

import { Component } from '@angular/core';
import {
  Event,
  NavigationCancel,
  NavigationEnd,
  NavigationError,
  NavigationStart,
  Router
} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Ng-Teams';
  loading = false;

  constructor(private router: Router) {
    this.router.events.subscribe((event: Event) => {
      switch (true) {
        case event instanceof NavigationStart: {
          this.loading = true;
          break;
        }

        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel:
        case event instanceof NavigationError: {
          this.loading = false;
          break;
        }
        default: {
          break;
        }
      }
    });
  }
}

 

我们希望在应用程序的主工具栏下面显示加载动画。以下是实现这一目标的HTML。

html:

<p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar>

如果loading为真我们就显示这个加载动画效果,具体如何隐藏显示 以及具体效果自行解决,可以用组件库的,也可以用CSS3写一个,也可以是个图片等等。

这就是基于路由器事件有一个完全工作的加载效果所需的全部。完整的代码可以在GitHub中找到。