Есть ли в Angular 4 что-то вроде ajaxStart и ajaxstop?

Question

Мне нужна ваша помощь, чтобы решить мой вопрос и сомневаться.

В основном я хочу показать "Loader" на экране во время загрузки. Поэтому я ищу что-то вроде ajaxStart и ajaxStop в Angular, где я могу начать показывать мой загрузчик, и как только все запросы будут выполнены, я спрячу свой загрузчик / индикатор выполнения.

В настоящее время я должен показывать загрузчик в каждом методе и должен скрывать в каждом методе успех. Я ищу умную и общую функцию.

Я надеюсь, что смогу заставить тебя понять мою заботу.

Answer 1

Пример кода:

Посмотрите на:

1. pendingRequests -> отслеживает открытые запросы
2. 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 Interceptor

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