如何在Angular 2 Final中扩展angular 2 http类 [英] How to extend angular 2 http class in Angular 2 final

问题描述

我正在尝试扩展angular 2 http类，以便能够处理全局错误并为我的secureHttp服务设置标头.我找到了一些解决方案，但不适用于Angular 2的最终版本. 有我的代码:

I'm trying to extent angular 2 http class to be able to handle global errors and set up headers for my secureHttp service. I found some solutions but it doesn't work with final release of Angular 2. There is my code:

文件:secureHttp.service.ts

File: secureHttp.service.ts

import { Injectable } from '@angular/core';
import { Http, ConnectionBackend, Headers, RequestOptions, Response, RequestOptionsArgs} from '@angular/http';

@Injectable()
export class SecureHttpService extends Http {

  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }
}

文件:app.module.ts

File: app.module.ts

    import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { routing } from './app.routes';
import { AppComponent } from './app.component';
import { HttpModule, Http, XHRBackend, RequestOptions } from '@angular/http';
import { CoreModule } from './core/core.module';
import {SecureHttpService} from './config/secure-http.service'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    CoreModule,
    routing,
    HttpModule,
  ],
  providers: [
    {
      provide: Http,
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => {
        return new SecureHttpService(backend, defaultOptions);
      },
      deps: [ XHRBackend, RequestOptions]
    }, Title, SecureHttpService],
  bootstrap: [AppComponent],
})
export class AppModule { }

component.ts

component.ts

constructor(private titleService: Title, private _secure: SecureHttpService) {}

  ngOnInit() {
    this.titleService.setTitle('Dashboard');
    this._secure.get('http://api.example.local')
        .map(res => res.json())
        .subscribe(
            data =>  console.log(data) ,
            err => console.log(err),
            () => console.log('Request Complete')
        );
  }

目前，它向我返回错误没有为ConnectionBackend提供程序！". 感谢您的帮助！

For now it returns me an error 'No provider for ConnectionBackend!'. Thanks for help!

推荐答案

出现此错误的原因是因为您试图提供SecureHttpService

The reason for the error is because you are trying to provide SecureHttpService

providers: [SecureHttpService]

这意味着Angular将尝试使用您的工厂创建实例，而不是 .而且它没有向令牌ConnectionBackend注册的提供者，可以提供给您的构造函数.

What this means is that Angular will try to create the instance, not using your factory. And it doesn't have a provider registered with the token ConnectionBackend to give to your constructor.

您可以从providers中删除SecureHttpService，但这会给您另一个错误(我猜这是您首先添加它的原因).该错误将类似于没有提供SecureHttpService的提供程序"，因为您正试图将其注入到构造函数中

You could remove the SecureHttpService from the providers, but that will give you another error (which I'm guessing is why you added it in the first place). The error will be something like "no provider for SecureHttpService" because you are trying to inject it into your constructor

constructor(private titleService: Title, private _secure: SecureHttpService) {}

在这里您需要了解令牌.您为provide提供的值是 token .

Here's where you need to understand about tokens. What you provide as the value to provide is the token.

{
  provide: Http,
  useFactory: ()
}

令牌是允许我们注入的.因此，您可以注入Http，它将使用您的创建的SecureHttpService.但是，如果需要，这将消除您使用常规Http的任何机会.

The token is what we are allowed to inject with. So you can instead inject the Http and it will use your created SecureHttpService. But this will take away any chance you have of using the regular Http, if you ever need it.

constructor(private titleService: Title, private _secure: Http) {}

如果您不需要了解SecureHttpService的任何信息，则可以像这样保留它.

If you don't need to know anything about the SecureHttpService, then you can leave it like this.

如果您希望能够实际注入SecureHttpService类型(也许您需要其中的一些API，或者您希望能够在其他地方使用常规的Http)，则只需更改provide

If you want to be able to actually inject the SecureHttpService type (maybe you need some API from it or maybe you want to be able to use the normal Http elsewhere), then just change the provide

{
  provide: SecureHttpService,
  useFactory: ()
}

现在，您可以同时注入常规的Http和SecureHttpService.并且不要忘记从providers中删除SecureHttpService.

Now you can inject both the regular Http and your SecureHttpService. And don't forget to remove the SecureHttpService from the providers.

这篇关于如何在Angular 2 Final中扩展angular 2 http类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！