如何在 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屋！