Использовать пользовательский сервис Http в приложении Ionic 2

Question

У меня есть кое-что, что я хочу сделать с каждым HTTP-запросом в моем приложении Ionic 2 (v2.0.0-beta.30), поэтому я создал свой собственный класс 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)
{
    //...
}

Я поставил отладчик здесь, и я вижу, что это угловой Http вместо MyHttp,

-------- ОБНОВЛЕНИЕ 2 -----------

Я пытался сделать то же самое с другим классом, и я вижу, как это работает. Например:

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

я вижу MyOtherClass2 впрыскивать, когда он просит MyOtherClass, Итак, я не знаю, делаю ли я что-то не так в MyHttp или если возможно есть какая-то ошибка с Http, Кто-нибудь смог успешно сделать это с Http?

Answer 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]
    }

  ]

Answer 2

Так же, как вы можете прочитать здесь, когда вы регистрируете 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 новый экземпляр этой службы будет создаваться при каждой загрузке компонента. Если вы хотите использовать один и тот же экземпляр во всем приложении (singleton), вам нужно добавить его в ionicBootstrap или в самом верху Component из вашего приложения.

Answer 3

Вы не можете использовать [новый...], вы можете попробовать { provide: Http, useClass: MyHttp }Это будет ionicBootstrap(MyApp, [{ provide: Http, useClass: MyHttp }], {});