当前位置： 正文

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

前端技术 2020-03-04

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

本文的目的是向您展示如何在从一个路由导航到另一个路由时显示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中找到。

赏