0

我对 Ionic 2 应用程序 (v2.0.0-beta.30) 中的每个 HTTP 请求都有一些我想做的事情，所以我创建了自己的 Http 类来扩展 angular 的服务。像这样的东西：

@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得到相同的结果。

MyHttp当有任何东西要注射时，我如何告诉注射器注射Http？

- - - - 更新 - - - - - -

我终于通过我的尝试绕过了死亡的白屏，也包括HTTP_PROVIDERS在提供者的数组中。但是，它仍然是注入Http而不是MyHttp在使用它的其他服务中。我已经尝试了以下各项：

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

所依赖的服务Http如下所示：

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

我在这里放了一个调试器，我可以看到它是 angular'sHttp而不是MyHttp.

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

我尝试用不同的班级做同样的事情，我确实看到它有效。例如：

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

我看到MyOtherClass2它要求时被注射MyOtherClass。所以，我不知道我是否做错了什么，MyHttp或者Http. 有没有人能够成功地做到这一点Http？

4

3 回答 3

1

这对我有用：

您的 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-25T11:11:25.607 回答
1

就像你可以在这里阅读一样，当你注册一个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-14T07:32:31.767 回答
0

你不能用[new...]，你能试试吗{ provide: Http, useClass: MyHttp } ？ionicBootstrap(MyApp, [{ provide: Http, useClass: MyHttp }], {});

于 2016-07-14T04:06:08.427 回答