每个HTTP请求上的Angular 2加载器 [英] Angular 2 loader on each http request

问题描述

我想做的是:
每当http请求出错时，我都想使用微调框.换句话说，只要我的app.component中发生http请求，我都希望用户看到加载屏幕.
我的spinner.component和spinner-service文件与

What i am trying to do is:
I want to use the spinner whenever a http request accurs. In other words i want user to see a loading screen whenever a http request happens in my app.component.
My spinner.component and spinner-service files are same with the answer in this question.
And my app.component's component is

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

要总结一下，每当其中一条路线中发生http请求时，我都想向用户显示微调框.我知道这是一个不好的问题，但是我对angular 2还是陌生的，如果有人可以帮助我，我将不胜感激.
非常感谢！
编辑！:
根特答案的解决方案: 我将http和spinner-service包装到了HttpClient组件中，并使用了它而不是常规的http模块.这是我的HttpClient组件:

To conclue , whenever a http request occurs in one of these routes, i want to show the spinner to user. I know this has been a bad question , but i am new to angular 2 and i would realy be grateful if anyone could help me with that.
Thanks alot!
Edit!:
Solution with Günther's answer: I wrapped my http and spinner-service into a HttpClient component and used it instead of regular http module. Here is my HttpClient 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()});
  }
}

推荐答案

使用Http(在您自己的类中包装Http已有答案)和<spinner-component>之间共享的服务. 另请参见 https://angular.io/docs/ts/latest/cookbook/component-communication.html

Use a service that is shared between Http (there are answers already how about wrapping Http in your own class) and the <spinner-component>. See also https://angular.io/docs/ts/latest/cookbook/component-communication.html

在共享服务中，维护一个已启动(增加)和已完成/失败的HTTP请求的计数器，并在每次计数器从0更改为>0或从>0更改为0时通知<spinner-component>启用或禁用自身.

In the shared service maintain a counter of started (increase) and completed/failed HTTP requests and notify the <spinner-component> every time when the counter changes from 0 to >0 or from >0 to 0 to enable or disable itself.

这篇关于每个HTTP请求上的Angular 2加载器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！