角9\ NgxSpinner:过载方法不起作用

Question

我正在尝试从NgxSpinner中重写显示和隐藏方法，以防止在进程持续时间太短时使用短时间显示旋转器。

这是扩展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，它就会毫无问题地出现。

我的服务有什么错误吗？

Answer 1

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

创建加载程序组件后，添加或创建此文件loader.interceptor.ts和loader.service.ts，以显示spinner。

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'];
    });
  }

如果你在做这件事时被卡住了，你可以访问我的斯塔克布利茨。

这里有不同的ngx-纺纱机如果你想.