每個http請求上的角度2加載器

Question

我想要做的是：
我希望在http請求發生時使用微調器。換句話說，我希望用戶在我的app.component中發生http請求時看到加載屏幕。
我的spinner.component和微調服務文件與this問題中的答案相同。
而我app.component的成分是

@Component({ 
    selector: 'todoApi', 
    template: ` 
     <div class="foo"> 
      <spinner-component></spinner-component> 
      <h1>Internship Project</h1> 
      <a [routerLink]="['Dashboard']">Dashboard</a> 
      <a [routerLink]="['Tasks']">List</a> 
      <router-outlet></router-outlet> 
     <div> 
    `, 
    directives: [ROUTER_DIRECTIVES,SpinnerComponent], 
    providers: [ 
     ROUTER_PROVIDERS, 
    ] 
}) 

@RouteConfig([ 
    { 
     path: '/dashboard', 
     name: 'Dashboard', 
     component: DashboardComponent, 
     useAsDefault: true 
    },{ 
     path: '/tasks', 
     name: 'Tasks', 
     component: TaskComponent 
    },{ 
     path: '/detail/:id', 
     name: 'TaskDetail', 
     component: TaskDetailComponent 
    }, 
]) 

要conclue，每當一個HTTP請求在這些線路之一發生時，我想表明的微調器用戶。我知道這是一個不好的問題，但我是角2的新手，如果有人能幫助我，我會非常感激。
非常感謝！
編輯!:
解決方案與半滑舌鰨的回答是：我 我的包裹和http到spinner-service一個HttpClient成分，並用它來代替普通的HTTP模塊。這裏是我的HttpClient組件：

import { Injectable } from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 
import { SpinnerService} from './spinner-service'; 

@Injectable() 
export class HttpClient { 
    constructor(
     private http: Http, 
     public spinner: SpinnerService 
    ){ 

    } 

    createAuthorizationHeader(headers:Headers) { 
    headers.append('Authorization', 'Basic ' + btoa('username:password')); 
    } 

    get(url) { 
    this.spinner.start(); 
    let headers = new Headers(); 
    this.createAuthorizationHeader(headers); 
    return this.http.get(url, { headers: headers }).do(data=> {this.spinner.stop()}); 
    } 

    post(url, data) { 
    this.spinner.start(); 
    let headers = new Headers(); 
    this.createAuthorizationHeader(headers); 
    return this.http.post(url, data, { headers: headers }).do(data=> {this.spinner.stop()}); 
    } 
} 

Answer 1

使用被共享的服務Http（有答案已經怎麼樣在自己的類包裝Http）和<spinner-component>。 又見https://angular.io/docs/ts/latest/cookbook/component-communication.html

在共享服務維護的開始（增加）計數器和完成/失敗的HTTP請求，並每次都通知<spinner-component>當計數器的變化從0到>0或>0到0啓用或禁用本身。

Answer 2

只是爲了誰從現在開始在這裏得到人民...

這種解決方案的微調不會在錯誤的情況下，與HTTP請求停止。 請務必做到以下幾點：

... 
return this.http.post(url, data, { headers: headers }) 
    .do(data=> {this.spinner.stop()}, 
    err=> {this.spinner.stop()); 
... 

Answer 3

謝謝您的回答岡特Zöchbauer的，根據我的需求，我建一個例子。我沒有使用容易使用的HTTP包裝器，但是，這個示例可以根據您的反制建議與多個服務調用協同工作。希望它可以幫助某人:)

1. 創建Loader服務。

   import { Injectable } from '@angular/core'; 
   import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
   
   @Injectable() 
   
   export class LoaderService { 
       public loaderCounter: BehaviorSubject<number> = new BehaviorSubject<number>(0); 
       displayLoader(value: boolean) { 
        let counter = value ? this.loaderCounter.value + 1 : this.loaderCounter.value - 1; 
        this.loaderCounter.next(counter); 
       } 
   } 
   

2. 包括您maain模塊文件 （例如：上文AppModule）的供應商中的服務

3. 在你的主要組件文件（例如：AppComponent），訂閱 變化，並反映到裝載器（在我的情況下，它是一個單獨的 組件）。

   //Imports 
   import { Subscription } from 'rxjs/Subscription'; 
   import { LoaderService } from './core/loader.service'; 
   .. 
   @Component({ 
       selector: 'my-app', 
       template: ` 
       <div class="container-fluid content"> 
        <router-outlet></router-outlet> 
       </div> 
       <spinner [visible]="displayLoader"></spinner> 
       ` 
   }) 
   
   export class AppComponent implements OnInit, OnDestroy { 
       displayLoader: boolean; 
       loaderSubscription: Subscription; 
       constructor(private loaderService: LoaderService) {} 
   
       ngOnInit() { 
        this.loaderSubscription = this.loaderService.loaderCounter.subscribe((counter: number) => { 
         this.displayLoader = counter != 0; 
        }); 
       } 
   
       ngOnDestroy() { 
        this.loaderSubscription.unsubscribe(); 
       } 
   } 
   

4. 使用Loader服務：

   import { LoaderService } from './core/loader.service'; 
       .. 
       export class SampleComponent implements OnInit { 
        constructor(private _service: SomeService, private loader: LoaderService) { } 
   
       ngOnInit() { 
        this.loader.displayLoader(true); 
        this._service.getBalance().subscribe(
         response => ..do something.., 
         () => .. error.., 
         () => this.loader.displayLoader(false) 
        ); 
       } 
   }