Angular 9 | NgxSpinner：覆盖的方法不起作用

Question

我正在尝试覆盖 NgxSpinner 的显示和隐藏方法，以防止在进程持续时间太短时出现短时显示微调器。

这是我在 class 中扩展 NgxSpinnerService

的代码

    import { Injectable } from '@angular/core';
    import { NgxSpinnerService, Spinner } from 'ngx-spinner';
    
    @Injectable({
        providedIn: 'root'
    })
    
    export class SpinnerService extends NgxSpinnerService {
        constructor() { super(); }
        private onDisplay: boolean = false;
    
        show (name?: string, spinner?: Spinner): Promise<unknown> {
            this.onDisplay = true;
            setTimeout(() => {
                console.log(`showing ${name} | onDisplay ${this.onDisplay}`);
                if (this.onDisplay) return super.show(name, spinner);
            }, 300);
            return null;
        }
    
        hide (name?: string, debounce?: number): Promise<unknown> {
            this.onDisplay = false;
            return super.hide(name, debounce);
        }
    }

这是我从中调用方法的组件的片段

    constructor(
        private _graphService: GraphsService,
        private _medicinesService: MedicinesServices,
        private _notification: NotificationService,
        private fb: FormBuilder,
        private spinner: SpinnerService
    ) { }

    ngOnInit (): void {
        this.init();
    }

    private init () {
        this.spinner.show('component');
        this._medicinesService.getAllGrupedBy().subscribe(
            (data) => {
                ...
                this.loadData();
            },
            (error) => {
                this._notification.showErrorToast(error.errorCode);
                this.spinner.hide('component');
            }
        );
    }

    private loadData (): void {
        this.spinner.show('component');
        if (!this.selectedOption) this.selectedOption = this.options[0];
        this.getData().subscribe(
            (data) => {
                ...
                this.spinner.hide('component');
            },
            (error) => {
                this.spinner.hide('component');
                this._notification.showErrorToast(error.errorCode);
            }
        );
    }

HTML 在 app.component.html

        <div [ngClass]="{ 'loading-container': !isMobileScreen }">
            <ngx-spinner [name]="spinnersConf.component.name" [fullScreen]="false" [bdColor]="spinnersConf.component.bgColor">
                <p style="font-size: 20px; color: white">{{ spinnersConf.component.text | translate }}</p>
            </ngx-spinner>
        </div>

控制台出现在开发者工具 window 中，但微调器不会显示。但是，如果我从 NgxSpinnerService 调用 show 方法，它将毫无问题地出现。

我的服务有什么问题吗？

Answer 1

首先为 loader 创建一个通用组件，每当您调用 API 您将看到的组件加载器时。

创建加载器组件后添加或创建此文件 loader.interceptor.ts 和 loader.service.ts 以显示微调器。

loader.interceptor.ts

import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest
} from "@angular/common/http";
import { Observable } from "rxjs";
import { finalize } from "rxjs/operators";
import { LoaderService } from "./loader.service";
import { NgxSpinnerService } from "ngx-spinner";
@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
  constructor(
    public loaderService: LoaderService,
    private spinner: NgxSpinnerService
  ) {}
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    this.loaderService.show();
    return next.handle(req).pipe(finalize(() => this.loaderService.hide()));
  }
}

loader.service.ts

import { Injectable } from "@angular/core";
import { NgxSpinnerService } from "ngx-spinner";
import { Subject } from "rxjs";
@Injectable()
export class LoaderService {
  constructor(private spinner: NgxSpinnerService) {}

  isLoading = new Subject<boolean>();
  show() {
    this.isLoading.next(true);
    this.spinner.show();
  }
  hide() {
    this.isLoading.next(false);
    this.spinner.hide();
  }
}

loader.component.html

<ngx-spinner bdColor="rgba(0, 0, 0, 0.8)" size="medium" color="#fff" type="square-jelly-box" [fullScreen]="true">
  <p style="color: white"> Loading... </p>
</ngx-spinner>

app.module.ts

providers: [
    LoaderService,
    { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }
]

app.component.html

<div *ngIf="isLoading | async">
  <app-loader></app-loader>
</div>

app.component.ts

import { HttpClient } from "@angular/common/http";
import { LoaderService } from "./loader/loader.service";

constructor(private http: HttpClient, private loaderService: LoaderService) {}

  isLoading: Subject<boolean> = this.loaderService.isLoading;

  data: any = [];

  showData() {
    this.data = [];
    this.http.get("assets/dummyData.json").subscribe(data => {
      this.data = data['employees'];
    });
  }

如果您在执行此操作时遇到困难，可以访问我的 Stackblitz。

这是不同的 ngx-spinner if you want.

Angular 9 | NgxSpinner：覆盖的方法不起作用

Angular 9 | NgxSpinner: Overriden methods aren't working

angular

ngx-spinner