带有加载指示器的 Angular 2 解析器

Question

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

Answer 1

您可以使用“对路由事件使用react”的策略来实现应用程序在任何路由事件发生时使用react。为此，您需要在 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;
    }
  }
}

在 View (html)中是这样的:

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