web-dev-qa-db-ja.com

angular 5のすべてのHTTPリクエストにスピナーを表示するには？

angular 5は初めてです。 angularのすべてのHTTPリクエストに対してスピナーを表示する共通の関数をコーディングする方法5.これを実装するのを手伝ってください。

angularangular-httpangular-http-interceptorsangular-httpclient
5
Harish

Angular HttpInterceptor を使用して、すべてのリクエストのスピナーを表示できます。ここに良い httpインターセプターの実装方法に関する中記事

また、スピナーサービス/モジュールを作成し、httpインターセプターに挿入する必要があります。最後に、インターセプトメソッドで、finally rxJsメソッドを使用してスピナーを停止できます。簡単な実装を次に示します。

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.spinnerService.start();
    return next.handle(req).finally(res => this.spinnerService.stop() );
}

楽しい！

ボーナス： スピナーサービスの実装例

13
Mehdi Benmoha

完全なガイドは こちら 材料mat-progress-spinner 使用法。とてもかっこいい！

1
trueboroda

ソース リンク

サービスを作成します

//loader.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

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

  public isLoading = new BehaviorSubject(false);
  constructor() { }
}

ローダーインターセプターの作成

    // loader.interceptors.ts
    import { Injectable } from '@angular/core';
    import {
        HttpErrorResponse,
        HttpResponse,
        HttpRequest,
        HttpHandler,
        HttpEvent,
        HttpInterceptor
    } from '@angular/common/http';
    import { Observable } from 'rxjs';
    import { LoaderService } from './loader.service';

    @Injectable()
    export class LoaderInterceptor implements HttpInterceptor {
        private requests: HttpRequest<any>[] = [];

        constructor(private loaderService: LoaderService) { }

        removeRequest(req: HttpRequest<any>) {
            const i = this.requests.indexOf(req);
            if (i >= 0) {
                this.requests.splice(i, 1);
            }
            this.loaderService.isLoading.next(this.requests.length > 0);
        }

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

            this.requests.Push(req);
            console.log("No of requests--->" + this.requests.length);
            this.loaderService.isLoading.next(true);
            return Observable.create(observer => {
                const subscription = next.handle(req)
                    .subscribe(
                        event => {
                            if (event instanceof HttpResponse) {
                                this.removeRequest(req);
                                observer.next(event);
                            }
                        },
                        err => {
                            alert('error returned');
                            this.removeRequest(req);
                            observer.error(err);
                        },
                        () => {
                            this.removeRequest(req);
                            observer.complete();
                        });
                // remove request from queue when cancelled
                return () => {
                    this.removeRequest(req);
                    subscription.unsubscribe();
                };
            });
        }
    }

ローダーコンポーネントを作成してから、アプリコンポーネントに追加します

  //loader.interceptor.ts
  import { Component, OnInit } from '@angular/core';
  import { LoaderService } from '../loader.service';

  @Component({
    selector: 'app-loading',
    templateUrl: './loading.component.html',
    styleUrls: ['./loading.component.css']
  })
  export class LoaderComponent implements OnInit {

    loading: boolean;
    constructor(private loaderService: LoaderService) {
      this.loaderService.isLoading.subscribe((v) => {
        console.log(v);
        this.loading = v;
      });
    }
    ngOnInit() {
    }

  }
1
Code Spy

サービスを作成してから、サブスクライブしているアプリケーションのルートレベルでサービスをイベントに公開できます。説明させてください。

broadcast.service.ts（これはあなたのサービスです）

import { Injectable } from '@angular/core';

import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';

import 'rxjs/add/operator/filter'
import 'rxjs/add/operator/map'

/**
 * This class acting as event service bus for the entire app.
 * No Need to register the class as this registered in the root level.
 * Can just inject to componets.
 */
@Injectable()
export class BroadcastService {

    private _handler: Subject<Message> = new Subject<Message>();

    broadcast(type: string, payload: any = null) {
        this._handler.next({ type, payload });
    }

    subscribe(type: string, callback: (payload: any) => void): Subscription {
        return this._handler
            .filter(message => message.type === type)
            .map(message => message.payload)
            .subscribe(callback);
    }
}

interface Message {
    type: string;
    payload: any;
}

次に、次のようなイベントを発行およびサブスクライブできます。

あなたのサービスレベル：

this.broadcastService.broadcast('PROGRESS_START');

アプリコンポーネントレベルで：

this.broadcastService.subscribe('PROGRESS_START', ()=>{
  //hit when you start http call
  this.myLoader = true;
});

最後にapp.component.htmlで：

<div *ngIf="myLoader">
 <!--YOUR LOADER SHOULD GO HERE-->
</div>
<router-outlet></router-outlet>

これは、必要なローダーを実装するための非常に一般的な疎結合の方法です。

0
Rukshan Dangalla