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

问题描述

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

这是我在扩展 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);
            }
        );
    }

app.component.html 中的 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>

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

我的服务是否有任何错误？

解决方法

你好@LorenaSineiro 首先为加载器创建一个通用组件，当你调用你会看到的组件加载器的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.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

如果您want

，这里有不同的 ngx-spinner

angular angular ngx-spinner