Benutze benutzerdefinierten HTTP-Dienst in Ionic 2 App

Question

Ich habe einige Dinge, die ich mit jeder HTTP-Anfrage in meiner Ionic 2 App (v2.0.0-beta.30) tun möchte, also habe ich meine eigene Http-Klasse, die Angulars Dienst erweitert . Etwas wie folgt aus:

@Injectable() 
export class myHttp extends Http 
{ 
    private myStuff(): void 
    { 
     //stuff to fo every request 
    } 

    public request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> 
    { 
     this.myStuff(); 
     return super.request(url, options); 
    } 

    public get(url: string, options?: RequestOptionsArgs): Observable<Response> 
    { 
     this.myStuff(); 
     return super.get(url, options); 
    } 
// etc. 
} 

Im Moment habe ich Sachen Funktion auf Http Aufruf, und ich will nicht alles ändern müssen MyHttp nennen. Ich möchte, dass irgendetwas Anfragen nicht weiß und nicht interessiert, dass es tatsächlich ruft MyHttp. Es scheint, als ob es eine Möglichkeit geben könnte, MyHttp anstelle von Http bereitzustellen, ich bin nur nicht sicher, wo Sie das mit einer Ionic 2 App tun würden.

Ich versuchte es die ionicBootstrap Funktion wie folgt ergänzt:

ionicBootstrap(MyApp, [new ProviderBuilder(Http).toClass(MyHttp)], {}); 

Das gibt mir nur die weißen Bildschirm des Todes. Ich habe auch versucht, indem auf die @Component Dekorateur von MyApp Klasse wie folgt:

@Component({ 
    providers: [new ProviderBuilder(Http).toClass(MyHttp)], 
    templateUrl: "build/app.html" 
}) 

Dies gibt den gleichen weißen Bildschirm. Ich bin mir nicht sicher, ob ich den Unterschied verstehe, indem ich toAlias anstelle von toClass mit dem gleichen Ergebnis versuchte.

Wie sage ich dem Injektor, MyHttp zu injizieren, wenn alles injizieren will Http?

-------- ----------- UPDATE

Ich habe endlich um den weißen Schirm des Todes mit meinen Versuchen auch mit HTTP_PROVIDERS in der Anordnung von Anbieter. Es injiziert jedoch immer noch Http anstelle von MyHttp in den anderen Diensten, die es verwenden. Ich habe versucht, jede der folgenden Möglichkeiten:

{ provide: Http, useClass: MyHttp } 
provide(Http, {useClass: myHttp }) 
new ProviderBuilder(Http).toClass(MyHttp) 

Der Dienst, der auf Http abhängig ist wie folgt aussieht:

public constructor(http: Http) 
{ 
    //... 
} 

ich hier einen Debugger setzen, und ich sehe es Winkel der ist Http statt MyHttp.

-------- UPDATE 2 -----------

Ich habe versucht, auf die gleiche Sache mit einer anderen Klasse, und ich sehe es funktioniert. Zum Beispiel:

ionicBootstrap(MyApp, [new ProviderBuilder(MyOtherClass).toClass(MyOtherClass2)], {}); 

Ich sehe MyOtherClass2 injiziert wird, wenn es für MyOtherClass fragt. Also, ich weiß nicht, ob ich etwas falsch mache in MyHttp oder ob es vielleicht einen Bug mit Http gibt. Hat jemand das mit Http erfolgreich geschafft?

Answer 1

Sie können [neue ... nicht verwenden], Können Sie versuchen, { provide: Http, useClass: MyHttp } wird es ionicBootstrap(MyApp, [{ provide: Http, useClass: MyHttp }], {});

Answer 2

einfach sein wie Sie here lesen können, wenn Sie ein provider wie folgt registrieren:

// bootstrap 
ionicBootstrap(MyApp, [DataService]); 

// component 
@Component({ 
    ... 
    providers: [DataService] 
}) 
class AppComponent { } 

Sie eine Verknüpfung verwenden, anstatt diese von writting:

Sie können diese Verknüpfung verwenden, da der Wert derselben dem Token entspricht. Also in Ihrem Fall würden Sie es wie folgt tun:

// at bootstrap 
ionicBootstrap(MyApp, [ 
    provide(Http, { useClass: myHttp }) 
]); 

// or in component 
@Component({ 
    ... 
    providers: [ 
    provide(Http, {useClass: myHttp }) 
    ] 
}) 
class AppComponent { } 

dass Denken Sie daran, wenn Sie es in der Component hinzufügen wird eine neue Instanz dieses Service jedes Mal, dass Komponente wird geladen erstellt werden. Wenn Sie dieselbe Instanz in der gesamten Anwendung (Singleton) verwenden möchten, müssen Sie sie in der App ionicBootstrap oder in der oberstenComponent hinzufügen.

Answer 3

Dieser arbeitete für mich:

Ihre myHttp mit dem Konstruktor beginnen sollte:

@Injectable() 
export class myHttp extends Http{ 
... 
    constructor(
     xhrBackend: XHRBackend, 
     requestOptions: RequestOptions) { 
     super(xhrBackend, requestOptions); 
    } 

Und in Ihrem app.module.ts sollten Sie Ihren Anbieter importieren als:

import { Http, XHRBackend, RequestOptions } from '@angular/http'; 
... 

@NgModule({ 
    ... 
    providers: [ 
    { 
     provide: Http, 
     useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => { 
     return new myHttp(backend, defaultOptions); 
     }, 
     deps: [XHRBackend, RequestOptions] 
    } 

    ]