Angular 2 Loader für jede http-Anforderung

as ich versuche zu tun, ist:
Ich möchte den Spinner immer dann verwenden, wenn eine http-Anfrage auftritt. Mit anderen Worten, ich möchte, dass der Benutzer einen Ladebildschirm sieht, wenn eine http-Anforderung in meiner app.component auftritt.
Meine spinner.component- und spinner-service-Dateien sind mit der Antwort in @ identisDie frage.
Und die Komponente meiner app.component ist

@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
    },
])

Um abzuschließen, wann immer eine http-Anfrage in einer dieser Routen auftritt, möchte ich den Spinner dem Benutzer zeigen. Ich weiß, dass dies eine schlechte Frage war, aber ich bin neu in Winkel 2 und ich wäre wirklich dankbar, wenn mir jemand dabei helfen könnte.
Vielen Dank
Bearbeiten!
Lösung mit Günthers Antwort: Ich habe mein @ eingewickehttp undspinner-service in einHttpClient -Komponente und verwendet es anstelle des regulären http-Moduls. Hier ist meinHttpClient component:

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

Antworten auf die Frage(8)

Ihre Antwort auf die Frage