प्रत्येक 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 के लिए नया हूं और अगर कोई मेरी मदद कर सकता है तो मैं आभारी रहूंगा।
बहुत बहुत धन्यवाद!
संपादित !: गुंठर के जवाब के साथ
समाधान: मैं एक HttpClient घटक में मेरी http और spinner-service लपेटा जाता है और यह सामान्य 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 अनुरोध विफल रहा है और जब 0 से >0 करने के लिए या >0 से 0 के लिए काउंटर परिवर्तनों को सक्षम या अक्षम करने के लिए खुद को <spinner-component> हर बार सूचित ।

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 wrapper का उपयोग नहीं किया जो उपयोग करना आसान होगा, हालांकि, यह उदाहरण आपके काउंटर सुझाव के आधार पर कई सेवाओं के कॉल के साथ काम करता है। उम्मीद है कि यह किसी की मदद करता है :)

1. लोडर सेवा बनाएं।

2. अपने मुख्य घटक फ़ाइल में (उदाहरण: AppComponent), परिवर्तन करने के लिए सदस्यता लें और को प्रतिबिंबित:

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

3. अपने maain मॉड्यूल फ़ाइल (AppModule पूर्व) के प्रदाताओं के भीतर सेवा को शामिल करें लोडर (मेरे मामले में यह एक अलग घटक है)।कोणीय द्वारा प्रदान की HttpClass विस्तार HTTP अनुरोध करते हैं और पर अपने कस्टम सेवा में `isBusy` राज्य को ट्रैक करने के

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