在 Angular 中显示 firebase CRUD 请求的加载栏答案

【问题标题】：Show loading bar on firebase CRUD request in Angular在 Angular 中显示 firebase CRUD 请求的加载栏
【发布时间】：2023-03-08 06:10:01
【问题描述】：

我读到有ngx-progressbar 可以在有任何http 请求时自动显示进度条。我想知道 Angular 中是否有任何库或方法可以在从 firebase 创建、读取、更新或删除数据时显示进度条。

我已经显示了加载指示器，但感觉不太好。当 crud 进程开始时，我只是给指标标签一个 true 条件，如果进程完成或失败，则给 false 值。有时，当数据没有完全显示在页面上时，指示器就会消失。

有什么提示吗？

【问题讨论】：

所有xhr请求都是异步的，所以你可以写一个关于它的状态并实现你自己的进度条。有很多教程可以满足您的需求，其中之一是 here

标签： angular firebase

【解决方案1】：

实现加载栏的最佳方法是使用 INTERCEPTOR。

app.module.ts

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoaderInterceptorService } from './_services/loader-interceptor.service';
...
providers: [
  {
    provide: HTTP_INTERCEPTORS,
    useClass: LoaderInterceptorService,
    multi: true
  }
]

LoaderInterceptorService

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, pipe } from 'rxjs';
import { tap } from 'rxjs/operators';
import { LoaderService } from '../_services/loader.service';
@Injectable({
  providedIn: 'root'
})
export class LoaderInterceptorService implements HttpInterceptor {
  constructor(private loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.showLoader();
    return next.handle(req).pipe(tap((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) {
        this.onEnd();
      }
    },
      (err: any) => {
        this.onEnd();
    }));
  }
  private onEnd(): void {
    this.hideLoader();
  }
  private showLoader(): void {
    this.loaderService.show();
  }
  private hideLoader(): void {
    this.loaderService.hide();
  }
}

Documentaion Read more

【讨论】：

这对firebase mate有用吗？因为在 angularfirestore2 中，我们不使用 http。我不知道幕后的过程，但我肯定知道。 firebase 的 crud 过程没有使用 http 方法（对不起，我是 angularfirestore2 的新手）