Angular 2旋转变压器带有加载指示器

发布时间：2020-12-17 06:56:46 所属栏目：安全来源：网络整理

导读：我使用解析器将数据加载到组件中,但在数据未从服务器返回之前,组件不会加载. 我想知道在服务器响应之前是否有一种方法来呈现负载指示器. 解决方法您可以使用“响应路由事件”策略来实现App以在发生任何路由事件时做出反应.要做到这一点,您需要在app.compone

我使用解析器将数据加载到组件中,但在数据未从服务器返回之前,组件不会加载.
我想知道在服务器响应之前是否有一种方法来呈现负载指示器.

解决方法

您可以使用“响应路由事件”策略来实现App以在发生任何路由事件时做出反应.要做到这一点,您需要在app.component.ts中使用以下代码：

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

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.sass']
})
export class AppComponent {

  loading: boolean = true;

  constructor(private router: Router) {
    router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: Event): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
    }

    if (routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationError) {
      this.loading = false;
    }
  }
}

在视图(html)中,例如：

<div id="loader" class="myloader" *ngIf="loading">
  Loading...
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!