web-dev-qa-db-ja.com

すべてのhttpリクエストangular2のロードバーを表示する

アプリをangularjsからangular2に移動しています。私はAngular Loading Barを使用していました。

angularインターセプターを使用した自動読み込みバー。自動的に機能するため、依存関係として含めるだけで、$ httpリクエストの進行状況が自動的に表示されます。

詳細

私はangular2で同様のプラグインを見つけようとしています。 ng2-slim-loading-barのようなものに出くわしましたが、ここでは進行状況を手動で管理する必要があります。 httpリクエストごとに、プログレスバーを手動で開始してから終了する必要があります。

それで、angularjsでAngular Loading Barが行うことを正確に実行できる既存のプラグインはありますか？または、既存のプラグインをこのように動作するように変更するにはどうすればよいですか。

angularprogress-barloadingangular-http-interceptors
5
undefined

ngx-progressbar を使用できます。 自動的に HTTPリクエストの実行中に進行状況バーを表示できます。

あなたがしなければならないのは：

1- NgProgressCustomBrowserXhrをインポートして提供します

import { NgProgressCustomBrowserXhr } from 'ngx-progressbar';

@NgModule({
 providers: [
   // ...
   { provide: BrowserXhr, useClass: NgProgressCustomBrowserXhr } ,
 ],
 imports: [
   // ...
   NgProgressModule
 ]
})

2-テンプレートで以下のように使用します。

<ng-progress></ng-progress>

進行状況が開始され、HTTPリクエストで自動的に完了します。 NgProgressServiceを使用してstart（）/ done（）を手動で呼び出す必要はありません。

14
Radouane ROUFID

これが私たちのプロジェクト（Red Hat Automated Migration Toolkit）で行ったことです：

  • HTTPサービスラッパー（OAuthの処理）では、イベントを発生させます。
  • その後、LoadingIndicatorServiceによってキャッチされます。
  • LoadingIndicatorService
    • SlimLoaderBarServiceをラップし、
    • 進行中のHTTPリクエストの数を追跡します。
    • 次に、パーセントをカウントし、20〜90％のスケールにします。
    • すべてのHTTPリクエストが完了すると、約1秒間90％のままになり、その後complete()が呼び出されます。

ナビゲーションステップごとに複数のリクエストがある場合、これは非常に自然に見え、優れたUXを提供します。通常、リクエストが1つしかない場合は、CSSベースのアニメーションを調整する（長くする）か、結局start()を使用することをお勧めします。

ここにいくつかの重要なコード部分があります：

@Injectable()
export class LoadingIndicatorService {

    constructor(
        private _slimBarService: SlimLoadingBarService,
        private _eventBusService: EventBusService,
    ) {
        // Register the LoadingSomething event listeners.
        this._eventBusService.onEvent
            .filter(event => event.isTypeOf(LoadingSomethingStartedEvent))
            .subscribe((event: LoadingSomethingStartedEvent) => this.loadingStarted() )
        this._eventBusService.onEvent
            .filter(event => event.isTypeOf(LoadingSomethingFinishedEvent))
            .subscribe((event: LoadingSomethingFinishedEvent) => this.loadingFinished() )
    }

    public getSlimService(){
        return this._slimBarService;
    }


    private counter: number = 0;
    private max: number = void 0;

    private reset() {
        this.counter = 0;
        this.max = void 0;
    }

    public loadingStarted(){
        this.counter++;
        this.max = this.counter;
        this.updateProgress();
    }

    public loadingFinished(){
        this.counter--;
        this.updateProgress();
    }

    private updateProgress() {
        if (this.counter == 0) {
            this._slimBarService.height = "2px";
            this._slimBarService.visible = true;
            this._slimBarService.progress = 95;
            this.max = void 0;
            Observable.timer(700).subscribe(() => {
                this._slimBarService.complete();
            });
        }
        else {
            // max - counter = finished.
            // If the things to load are added after something loaded, the progress would go back.
            // But let's rely on that loading will start fast at the beginning.
            // Start at 20, jump to 90.
            let percent = 20 + 70 * (1 - (this.max - this.counter) / this.max);
            this._slimBarService.height = "3px";
            this._slimBarService.color = "#39a5dc";
            this._slimBarService.visible = true;
            this._slimBarService.progress = percent;
        }
    }

}


    let responseObservable2 = responseObservable.do(
        () => console.log("Request SUCCEEDED"),
        () => console.log("Request FAILED"),
        () => {
            console.log("Request FINISHED");
            if (this._eventBus) {
                console.log("Request FINISHED, firing");
                this._eventBus.fireEvent(new LoadingSomethingFinishedEvent(responseObservable))
            }
        }
    );

HTTPサービスラッパー：

@Injectable()
export class WindupHttpService extends Http {

    private configureRequest(method: RequestMethod, f: Function, url: string | Request, options: RequestOptionsArgs = {}, body?: any): Observable<Response> {
        let responseObservable: Observable<Response> = ...

    ...

    console.log("Load STARTED");
    if (this._eventBus)
        console.log("Load STARTED, firing");
    this._eventBus.fireEvent(new LoadingSomethingStartedEvent(responseObservable));

    return responseObservable2;
}

完全なコードについては、github.comでプロジェクトWindupを検索してください。

1
Ondra Žižka

小切手 @ngx-loading-barこれはHttpコールとルーティングのプログレスバーを自動的に追加します

https://github.com/aitboudad/ngx-loading-bar

0
Reza