Angular2 RC6 HttpModule手动注入

Question

我正在将一个项目从angular2 RC4迁移到RC6，我有一个需要Http的自定义表单验证器。在迁移之前，我将ReflectiveInjector与HTTP_PROVIDERS一起使用，但与RC6一起使用，这已不可能了，因为HTTP_PROVIDERS已分别弃用，不再存在。这是验证器中的静态方法：

    static checkVat(control: FormControl) {
    let checkVatUrl = "http://localhost:8080/checkvat";

    let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
    let http = injector.get(Http);
    let authHttp = new AuthHttp(new AuthConfig(), http);
    if (control.value === "") {
        return new Observable((obs: any) => {
            obs.next(null);
            obs.complete();
        });
    } else {
        return authHttp.get(checkVatUrl + "/" + control.value)
            .map((data: Response) => {
                if (data.json().valid) {
                    return null;
                } else {
                    let reason = "isNotValidVat";
                    return {[reason]: true};
                }
            })
            .catch(function (e) {
                return new Observable((obs: any) => {
                    obs.complete();
                });
            });
    }
}

仅仅用HttpModule替换HTTP_PROVIDERS是不起作用的，我在stackoverflow(NG2 RC5:HTTP_PROVIDERS已弃用(上发现了一个关于测试的类似问题，但唯一的答案是针对测试的。

如果有另一种或更好的解决方案可用于此自定义验证程序，我也对此持开放态度，我该如何手动将Http或HttpModule与RC6"注入"。

提前谢谢。

更新：checkVat方法是静态的，这就是为什么我必须使用ReflectiveInjector，而不是像其他地方一样通过构造函数注入它。自定义验证器的使用方式如下：

this.vatCtrl = new FormControl("", Validators.compose([Validators.pattern(this.vatService.vatPattern)]),VatValidator.checkVat);

更新2:在Günther Zöchbauer的回答的帮助下，我对代码进行了如下更改，使其在没有静态功能和不需要手动注入的情况下工作：

验证器：

@Injectable()

导出类VatValidator｛

constructor(private http: Http) {
}
checkVat(control: FormControl) {
    let checkVatUrl = "http://localhost:8080/checkvat";
    let authHttp = new AuthHttp(new AuthConfig(), this.http);
    if (control.value === "") {
        return new Observable((obs: any) => {
            obs.next(null);
            obs.complete();
        });
    } else {
        return authHttp.get(checkVatUrl + "/" + control.value)
            .map((data: Response) => {
                if (data.json().valid) {
                    return null;
                } else {
                    let reason = "isNotValidVat";
                    return {[reason]: true};
                }
            })
            .catch(function (e) {
                return new Observable((obs: any) => {
                    obs.complete();
                });
            });
    }
}

}

在具有FormControl的组件中：

    constructor(private vatValidator: VatValidator) {
    this.vatCtrl = new FormControl("", Validators.compose([Validators.pattern(vatPattern)]), this.vatValidator.checkVat.bind(this.vatValidator));
}

Answer 1

import { ReflectiveInjector } from '@angular/core';
import { Http, XHRBackend, ConnectionBackend, BrowserXhr, ResponseOptions, XSRFStrategy, BaseResponseOptions, CookieXSRFStrategy, RequestOptions, BaseRequestOptions } from '@angular/http';
class MyCookieXSRFStrategy extends CookieXSRFStrategy {}
...
let http =  ReflectiveInjector.resolveAndCreate([
        Http, BrowserXhr, 
        { provide: ConnectionBackend, useClass: XHRBackend },
        { provide: ResponseOptions, useClass: BaseResponseOptions },
        { provide: XSRFStrategy, useClass: MyCookieXSRFStrategy },
        { provide: RequestOptions, useClass: BaseRequestOptions }
      ]).get(Http);

当然，您仍然需要包含HttpModule，请尽情享受！

Answer 2

如果稍微更改验证器类，则不需要静态方法

@Injectable()
class PatternValidator {
  constructor(private http:Http){}
  // this is a method that returns a validator function  
  // configured with a pattern
  pattern(pattern) {
    return (control:Control) => {
      this.http.get(...)
    ...
    }
  }
}

你可以像这样使用它：

• 将它注入到您的组件中，以便DI在(Http(中传递它的依赖项

constructor(private pattern:PatternValidator) {}

• 将其与bind(pattern)一起传递，以便.this在验证器函数内继续工作

this.vatCtrl = new FormControl("", 
    Validators.compose([
        this.pattern(this.vatService.vatPattern).bind(this.pattern)
    ]), VatValidator.checkVat);

另请参阅在角度2 中手动注入Http

Answer 3

使用RC5和RC5之后，您可以做的是，

import { HttpModule} from '@angular/http';
@NgModule({
  imports:      [ BrowserModule,HttpModule ],  //<------HttpModule
  declarations: [ AppComponent],
  providers:    [service],
  bootstrap:    [ AppComponent ]
})

在役或组件，

import { Http, Response } from '@angular/http';
@Injectable()
export class service{
  constructor(private http:Http){}           //<----inject here
  // use http here
}