带负载指示器的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

Answer 3

我想到的另一个解决方案是在解析器中使用Observable<Observable<...>>：

// data-resolver.service.ts

// ...

export class DataResolverService implements Resolve<Observable<Data>> {

// ...

  resolve(route: ActivatedRouteSnapshot): Observable<Observable<Data>> {
    return of(this.client.get(...));
  }
}

注意rxjs的of操作符用来从源Observable构造一个立即完成的Observable。现在，您可以轻松地在组件中处理加载指示器：

export class DashboardComponent {
  loading = true;
  error = false;

  data$: Observable<Data>;

  constructor(private activatedRoute: ActivatedRoute) {
    this.data$ = this.activatedRoute.data.pipe(switchMap((data) => data.data$));
    this.data$.subscribe(() => this.loading = false, () => this.error = true);
  }
}

请看我关于这个here的深入的中型故事。这是一个来自我的排班应用程序tift的真实示例。