Question

我需要您的帮助来解决我的疑问和疑问。

基本上，我想在加载时在屏幕上显示“ Loader”。因此，我正在Angular中寻找诸如ajaxStart和ajaxStop之类的东西，在那里我可以开始显示我的加载器，一旦所有请求完成，我将隐藏我的加载器/进度条。

当前，我必须在每种方法中显示加载程序，并且需要隐藏每种方法的成功。我正在寻找一种智能且通用的功能。

我希望我能使您理解我的担心。

Answer 1

示例代码：

看看：

pendingRequests->跟踪未解决的请求
loaderService->用于显示/隐藏加载程序的单独服务。

导入

import { HttpInterceptor, HttpRequest, HttpHandler, HttpErrorResponse } from 
"@angular/common/http";
import { Observable, throwError } from "rxjs";
import { catchError, finalize } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class ErrorInterceptor implements HttpInterceptor {

    private pendingRequests = 0;

    constructor(private loaderService: LoaderService) {}

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

      this.pendingRequests++;
      this.loaderService.show();

      return next.handle(request).pipe(

          catchError(err => {
            if (err instanceof HttpErrorResponse) {

              if (err.status === 401 || err.status === 403) {
                  // Invalidate user session and redirect to login/home
              }

              console.log('HTTP ERR: ', err);
              return throwError(err);
            }
          }),

          finalize(() => {
            this.pendingRequests--;
            if (!this.pendingRequests) {
              this.loaderService.hide();
            }
          })
        );
    }
}

Answer 2

Ajax拦截器

    import { Injectable } from '@angular/core';
    import { MatSnackBar } from '@angular/material/snack-bar';
    import { Router } from '@angular/router';

    import {
        HttpRequest,
        HttpHandler,
        HttpEvent,
        HttpInterceptor,
        HttpResponse,
        HttpErrorResponse
    } from '@angular/common/http';
    import { Observable, pipe } from 'rxjs';
    import { map, catchError, finalize } from 'rxjs/operators';
    import { AjaxInterceptorService } from '../services/ajax-interceptor.service';

    @Injectable()
    export class AjaxInterceptor implements HttpInterceptor {

        constructor(private _ajaxInterceptorSvc: AjaxInterceptorService, private _snack: MatSnackBar, private _router: Router) {
        }

        intercept(
            req: HttpRequest<any>,
            next: HttpHandler
        ): Observable<HttpEvent<any>> {
            return next.handle(req).pipe(
                map(event => {
                    this._ajaxInterceptorSvc.setProgressSMasktatus(true);
                    if (event instanceof HttpResponse) {
                        //Show success message. 
                        // You can do this for only put/post/update requests by adding this check if you want to.
                       // if (req.method!='GET')
                        this._snack.open('success!', 'X', { duration: 3000, verticalPosition: 'bottom', horizontalPosition: 'center', panelClass: 'snack-success' });
                    }
                    return event;
                }),
                catchError((error: HttpErrorResponse) => {
                     //Hide the spinner
                this._ajaxInterceptorSvc.setProgressSMasktatus(true);
                //redirect to error component with status 
                this._router.navigate(['/error', error.status]);
                throw (error);
                }),
                finalize(() => {
                    //Hide the spinner
                    this._ajaxInterceptorSvc.setProgressSMasktatus(false);
                })
            )
        }
    }

服务

    import { Injectable } from '@angular/core';
    import { BehaviorSubject, Observable } from 'rxjs';

    @Injectable({
        providedIn: 'root'
    })
    export class AjaxInterceptorService {

        constructor() { }

        //progress-mask
        private showProgressSub = new BehaviorSubject<boolean>(false);
        showProgressMask = this.showProgressSub.asObservable();

        //Call this from interceptor during any http activity.
        setProgressSMasktatus(status: boolean) {
            this.showProgressSub.next(status);
        }
    }

进度掩码组件

import { Component, OnInit } from '@angular/core';
    import { AjaxInterceptorService } from '../../services/ajax-interceptor.service';

@Component({
  selector: 'progress-mask',
  templateUrl: './progress-mask.component.html',
  styleUrls: ['./progress-mask.component.less']
})
export class ProgressMaskComponent implements OnInit {
    showProgress: boolean;

    constructor(private _ajaxInterceptorSvc: AjaxInterceptorService) { }

    ngOnInit() {
        //subscribe to showProgressMask
        this._ajaxInterceptorSvc.showProgressMask.subscribe(
            status => this.showProgress = status
        )
  }

}

进度掩码HTML

<div class="loadWrapper" *ngIf="showProgress">
  <div class="loader"></div>
</div>

CSS

.loadWrapper {
  background: rgba(0,0,0,0.3);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99999;
}

.loader {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid #3d3e3f; /* gray */
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

Angular 4中有没有像ajaxStart和ajaxstop一样的东西？

2 个答案: