Angular 2: eine Singelton Klasse HTTP-Service

Question

Erstellen

Derzeit verwende ich HTTP-Dienst in meinem Projekt, so habe ich für jede Anforderung die HTTP-Dienste aufrufen, zB

this.http.get((`${this._getAPI}}`)) 
     .map(res => res.json()) 
     .catch(err => Observable.throw(err.json().error)); 
} 

dass adaequat aber ich muss es für jede Anfrage schreiben, was ich möchte, ist eine Singleton-Klasse für HTTP-Anfragen, die die Funktionen zum GET, POST, DELETE, EDIT, SO haben, wie kann ich die Singelton Http Service-Klasse zu erreichen, so habe ich keine zu schreiben diese Zeile wieder für jede Anfrage möchte einfach so etwas haben

HttpService.callTheGetApi()//its just dummy example 

wobei HttpService sollte Singelton Klasse mit Einzelinstanz sein.

Answer 1

Erstellen Sie einen Dienst HttpService und geben Sie seinen Anbieter nur in der app.module.ts. Wenn Sie keine Anbieter für diesen Dienst in einer Ihrer Komponenten angeben, versucht Angular, den Anbieter zu injizieren, wenn Sie versuchen, es in eine Komponente zu injizieren. Da es nicht auf der Komponentenebene definiert ist, überprüft es seine Eltern, Großeltern und wird schließlich das Stammmodul erreichen, in dem der Anbieter deklariert wurde. In diesem Fall wird Angular eine einzige Instanz dieses Dienstes verwenden, der vom Injektor auf App-Ebene erstellt wurde.

Answer 2

Sie sollten einen Dienst erstellen, der Ihre API-Anrufe umschließt. Etwas Ähnliches.

@Injectable() 
export class BackendService { 

    constructor(private http: Http) {} 

    callTheGetApi() : Observable<any> { 
    this.http.get((`${this._getAPI}}`)) 
     .map(res => res.json()) 
     .catch(err => Observable.throw(err.json().error)); 
    } 
} 

Dann (wie Yakov schon sagt), bietet das Modul irgendwo in der Nähe der Spitze Ihres Komponentenbaumes, wie ein Kernmodul oder die App-Modul.

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { ackendService } from './backend.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ], 
    imports: [ 
    HttpModule, 
    ], 
    declarations: [ 
    ], 
    providers: [ 
    BackendService 
    ] 
}) 
export class AppModule { } 

Dann in jeder Komponente möchten Sie Ihre api rufen machen würden Sie die BackendService injizieren.

import { BackendService } from 'app/core/backend.service'; 

@Component({ 
    selector: 'app-some-comp', 
    templateUrl: './some-comp.component.html', 
}) 
export class SomeCompComponent { 
    constructor(private backend: BackendService) {} 

    someMethod() { 
     this.backend.callTheGetApi().subscribe(() => { 
     // handle the response 
     }); 
    } 
}