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

Question

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

Answer 1

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

import { Component } from '@angular/core';
import { Router, RouterEvent, 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: RouterEvent) => {
      this.checkRouterEvent(routerEvent);
    });
  }

  checkRouterEvent(routerEvent: RouterEvent): 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>

Answer 2

最简单的版本是 ngIf 语句

将图像包装在根级组件上的 ngIf 中。

使用服务来设置它是否可见。

例如：

发送请求之前：调用服务函数将变量设置为 true

然后在加载的组件中，它所做的第一件事就是将该变量设置回 false