角2でHTTPリクエストの前後に共通の関数を呼び出す

Question

angular2プロジェクト全体に共通のローダーを設定する必要があります。 だから、ちょうど私の新しいhttpコールがGET、POST、PUTのいずれかを生成してから、要求されたローダーが表示される前です。 http応答（成功またはエラー）がサーバー側から届くと、ローダーは消えます。

私は上記の機能を実行できることを利用してビルド済みのモジュールがあります。 私は角度機能でそれを行うことができるように、私に何らかの方法を教えてください。 httpリクエストにrxjsを使用しています。

jQueryまたはJavascriptを使用しません。

Answer 1

httpインターセプタを作成し、内部に共通の機能を呼び出します。独自のインターセプタ実装like thisを書いたり、HTTPがうまく機能拡張an external library

Answer 2

@Injectable() 
class MyService { 
    private change:Subject<boolean> = new BehaviorSubject(false); 
    public change$ = this.change.asObservable(); 

    constructor(private http:Http) {} 

    get(...) { 
    this.change.next(true) 
    return this.http.get(...) 
    .map(...) 
    .finally(_ => this.change.next(false); 
    } 
} 

@Component({ 
    selector: 'loader', 
    template: ` 
    <div *ngIf="myService.change | async">is loading ...</div> 
` 
)} 
class LoaderComponent { 
    constructor(public myService:MyService){} 
} 

Answer 3

を使用することのどちらか - 私たちのプロジェクトでは、我々はまた、いくつかのシナリオのためのスピナ別名「ローダー」の明示的な制御を望んでいました。したがって、SpinnerServiceがすべてのコンポーネントで利用可能な当社のコアmoduleにあります。

@Injectable() 
export class SpinnerService { 

    private spinnerStateSource = new Subject<SpinnerState>(); 
    spinnerState$ = this.spinnerStateSource.asObservable(); 

    private defaultMessage: string = 'Loading...'; 

    show(message?: string) { 

    let msg = this.defaultMessage as string; 
    if (message) { 
     msg = message; 
    } 

    this.spinnerStateSource.next({ showing: true, message: msg }); 
    } 

    hide() { 
    this.spinnerStateSource.next({ showing: false, message: '' }); 
    } 

    spin(obs: Observable<any>, message?: string): Observable<any> { 
    this.show(message); 
    return obs.finally(() => this.hide()); 
    } 

} 

class SpinnerState { 
    showing: boolean; 
    message: string; 
} 

メインモジュール内のコンポーネントは、実際のスピナーUI（EDIT：ちょうどギュンターの答え@のように）表示/非表示するサービスに加入、およびその他のコンポーネントを（サービスを介して）表示するようにスピナーを伝えることができます/隠す。

たとえば、コンポーネントが複数のHTTP呼び出しを行う必要があるかどうかという例があります。参照データを取得したら、これらの呼び出しがすべて完了するまでスピナーに表示させます。そこで、我々は待っているアクションでspin関数を呼び出します。

this.spinnerService.spin(
    Observable.forkJoin(
     this.refDataService.getRefDataList('statusTypes'), 
     this.refDataService.getRefDataList('itemTypes') 
    ) 
).subscribe(result => { 
      this.statusTypes = result[0]; 
      this.itemTypes = result[1]; 
});