Angular2 RC1ローディングインジケータを実装するための最善のアプローチ

Question

私はアプリケーションワイドのローディングバーを実装しようとしています。ユーザーがアプリケーションのリンクをクリックしてデータをダウンロードしている最中にローディングバーが表示されるようにします。このような

何か：現在

http://chieffancypants.github.io/angular-loading-bar/

、私がやったことはブール型プロパティ、isLoadingグローバルシングルトンサービスを追加されます。私の主なアプリコンポーネントのテンプレートでは、角度material2プログレスバーを追加しました。

<md-progress-bar mode="indeterminate" *ngIf="_globalService.isLoading"></md-progress-bar> 

ここで、httpリクエストを開始するたびに、そのコンポーネントのisLoadingプロパティをtrueに設定します。その要求が完了すると、私はそれをfalseに設定します。

私の現在のケースでは、すべてのコンポーネントにサービスを注入し、手動でisLoadingをtrueまたはfalseに設定する必要があります。

私は、アプリケーション全体ですべてのAjaxリクエストの開始と完了をキャプチャする方法があるのだろうかと疑問に思っていたので、これを購読して手動で処理する必要はありません。

Answer 1

私は、あなたが何をしているのかを2通りの方法で確認できます。最初のものはすべてのHttpリクエストを専用サービスに抽象化し、2つ目はHttpサービスをラップすることです。

サービス。とにかくコンポーネントからHttpリクエストを作成することはおそらく最良のアイデアではないでしょう。したがって、http-stuffを専用サービスに移動してそこから_globalService.isLoadingフラグを設定する方が良いでしょう。コンポーネントはこれらのことを知ってはいけません。「getAccounts」などのことだけを気にします。実際のHTTPリクエストを抽象化すると、インジケータフラグがコンポーネントコードから隠される可能性があります。

デフォルトのHttpサービスをラップします。 isLoadingフラグを設定できるもう1つの層にHttpサービスをラップすることは完全に可能です。この場合、コンポーネントコードはインジケータ機械のローディングについては何も知らないでしょう。

import {Http} from '@angular/http'; 
import {Injectable} from '@angular/core'; 
import {GlobalService} from './globalService'; 

export class HttpLoading extends Http { 

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _globalService: GlobalService) { 
    super(backend, defaultOptions); 
    } 

    get(url: string, options?: RequestOptionsArgs) { 
    this._globalService.isLoading = true; 
    return super.get(url, options) 
     .map(res => { 
     this._globalService.isLoading = false; 
     return res; 
     }); 
    } 
} 

と

bootstrap(App, [ 
    GlobalService, 
    HTTP_PROVIDERS, 
    provide(Http, { 
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, globalService: GlobalService) => new HttpLoading(backend, defaultOptions, globalService), 
    deps: [XHRBackend, RequestOptions, GlobalService] 
    }) 
]) 

デモとして登録：http://plnkr.co/edit/S5nSpscC3tIwX63lrBtO?p=preview