Угловой 2 загрузчик по каждому запросу http

Question

Что я пытаюсь сделать:
Я хочу использовать счетчик всякий раз, когда запрашивается HTTP-запрос. Другими словами, я хочу, чтобы пользователь видел экран загрузки всякий раз, когда HTTP-запрос происходит в моем приложении app.component.
Мои параметры spinner.component и spinner-service совпадают с ответом на вопрос 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, и я был бы очень благодарен, если бы кто-нибудь мог мне помочь в этом.
Спасибо большое!
Edit !:
Решение с ответом Гюнтера: Я обмотал 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. Создать службу погрузчика.

   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 модуль файл (Ex: AppModule)

3. В вашем основном компоненте файл (Ex: 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. Использование службы загрузчика:

   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) 
        ); 
       } 
   }