angular - 在所有子组件和子子组件中的数据到达 Angular 之前显示加载栏的最佳方式是什么

Question

我有带加载条的组件，它通过名为 isLoading 的 bool 变量显示和隐藏。例如:

ngOnInit() {
  this.isLoading = true;
  this.someService.getAll().subscribe(data => { 
    // some code...
    this.isLoading = false;
  });
}

<loading-bar *ngIf="isLoading"></loading-bar>

但是我遇到了一个问题，当主组件中有子组件并从它们加载数据时。加载栏应该在主组件中，只有当所有子组件的数据到达时才隐藏。实现这一目标的最佳方法是什么。

Answer 1

您可以使用 HttpInterceptor 来检测应用程序中正在进行的任何 HTTP 事件，并创建一个在其中保留 HTTP 事件标志的服务。现在在您的根组件中，只需检查该标志并显示一个加载微调器。这样您就不必单独处理每个子组件和子子组件的加载栏显示。

HTTPInterceptor 和相关服务的代码应该是这样的。

import { Injectable } from '@angular/core';
import { Observable, of, throwError } from 'rxjs';
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest
} from '@angular/common/http';

import { BehaviorSubject } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';

@Injectable()
export class HTTPStatus {
  private requestInFlight$: BehaviorSubject<boolean>;
  constructor() {
    this.requestInFlight$ = new BehaviorSubject(false);
  }

  setHttpStatus(inFlight: boolean) {
    this.requestInFlight$.next(inFlight);
  }

  getHttpStatus(): Observable<boolean> {
    return this.requestInFlight$.asObservable();
  }
}

@Injectable()
export class HTTPListener implements HttpInterceptor {
  constructor(private status: HTTPStatus) {
  }

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      map(event => {
        this.status.setHttpStatus(true);
        return event;
      }),catchError(error => {
        return Observable.throw(error);
      }),
      finalize(() => {
        this.status.setHttpStatus(false);
      })
    )
  }
}

在您的根应用组件中注入(inject) HTTPStatus 服务。

  HTTPActivity: boolean;

  constructor(private httpStatus: HTTPStatus) {
    this.httpStatus.getHttpStatus().subscribe(status => { this.HTTPActivity = status; });
  }

在组件的 .html 部分，现在您可以通过检查 HTTPActivity bool 变量来显示/隐藏加载栏或微调器。

<div id="preloader" [hidden]=!HTTPActivity>
  <div id="loader"></div>
</div>

当然，您必须在模块的提供程序数组中注册 HTTPListener 和 HTTPStatus 服务。

谢谢。