在Ionic 2应用程序中使用自定义Http服务

我在Ionic 2应用程序（v2.0.0-beta.30）中对每个HTTP请求都想做一些事情，所以我创建了自己的Http类来扩展angular的服务。事情是这样的：在Ionic 2应用程序中使用自定义Http服务

@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. 
}

我有东西目前呼吁Http功能，我不希望有改变每一个东西叫MyHttp。我希望任何提出请求的人都不知道，也不在意它实际上是在呼叫MyHttp。似乎应该有一种方法来提供MyHttp而不是Http，我只是不确定你会在哪里用Ionic 2应用程序来做这件事。

我尝试添加它ionicBootstrap功能是这样的：

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

这只是给了我死亡的白色屏幕。我也尝试添加到@Component装饰MyApp类是这样的：

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

这给出了同样的白色屏幕。我不确定我是否了解差异，我试过toAlias而不是toClass，结果相同。

如何告诉注射器在有什么东西想要注入Http时注入MyHttp？

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

我终于得到了周围与我尝试死亡的白色屏幕也通过包括HTTP_PROVIDERS阵列中供应商。但是，在使用它的其他服务中，它仍然注入Http而不是MyHttp。我试过以下每一项：即依赖于Http

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

服务看起来是这样的：

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

我把一个调试器在这里，我可以看到它是角的Http，而不是MyHttp。

--------更新2 -----------

我想同样的事情不同的类，我也看到它的工作。例如：

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

我看到MyOtherClass2时，它要求MyOtherClass越来越注射。所以，我不知道我是否在MyHttp中做错了什么，或者可能是Http有一些错误。有没有人能够通过Http成功完成此操作？

来源

2016-07-13 dnc253

您不能使用[新...]，可以尝试{ provide: Http, useClass: MyHttp } 这将是ionicBootstrap(MyApp, [{ provide: Http, useClass: MyHttp }], {});

来源

2016-07-14 04:06:08

我试过这个，我在我的应用中获得了白色屏幕。就像我在其他答案中的评论一样，我不确定我是否在我的应用中缺少其他东西。 – dnc253

请查看我更新的问题，看看是否有更多信息可以提供。谢谢。 – dnc253

就像你可以阅读here，当您注册一个provider这样的：

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

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

您正在使用的，而不是书面方式这个快捷方式，：

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

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

您可以使用该快捷键，因为它的值与标记相同。所以你的情况，你必须做这样的：

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

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

记住，如果你在Component它添加该服务的新实例将每次创建的组件被加载。如果您想在整个应用程序（单身人士）中使用相同的实例，您必须将其添加到应用程序的ionicBootstrap或最顶端的Component中。

来源

2016-07-14 07:32:31 sebaferreras

我第一次尝试'提供'功能就像你在这里，但后来在角度来源看到，它已被弃用。这就是为什么我尝试使用'ProviderBuilder'。我尝试了上面的内容，然后看到白色屏幕。我不知道我是否在我的应用程序中丢失了其他东西或什么... – dnc253

请查看我更新的问题，看看是否有任何更多信息可以提供。谢谢。 – dnc253

您是否尝试过为Http服务创建别名？就像你可以阅读[这里]（https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#injector-providers）一样，你可以通过添加'[MyHttp，{provide： Http，useExisting：MyHttp}]'。这样，您的自定义服务的相同实例将用于解决Http和MyHttp引用。 – sebaferreras

这为我工作：

你myHttp应该开始用构造：

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

而在你app.module.ts你应该导入您的供应商为：

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

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

    ]

来源

2017-01-25 11:11:25

在Ionic 2应用程序中使用自定义Http服务

回答

相关问题