Angular2 RC6 HttpModule 手动注入(inject)

标签 angular typescript angular2-forms angular2-injection

我正在将一个项目从 angular2 RC4 迁移到 RC6,我有一个需要 Http 的自定义表单验证器。 在迁移之前,我将 ReflectiveInjectorHTTP_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();
                });
            });
    }
}

只是将 HTTP_PROVIDERS 替换为 HttpModule 是行不通的,我在 stackoverflow ( NG2 RC5: HTTP_PROVIDERS is deprecated ) 上发现了一个关于测试的类似问题,但唯一的答案是特定于测试。

我如何使用 RC6 手动“注入(inject)”HttpHttpModule,如果有针对此自定义验证器的其他或更好的解决方案,我也对此持开放态度。

提前致谢。

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

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

更新 2: 在 Günther Zöchbauer 的回答的帮助下,我按如下方式更改了代码,使其在没有静态功能且无需手动注入(inject)的情况下工作:

验证器:

@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));

}

最佳答案

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,尽情享受吧!

关于Angular2 RC6 HttpModule 手动注入(inject),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39406933/

相关文章:

javascript - 以 Angular 形式修补值

Angular + redux/ngrx : state update vs. 形式

angular - Webpack 和 TypeScript 上的 SignalR : cannot find module './NodeHttpClient'

javascript - 条件验证 Angular 2 - 模型驱动表单

Angular:如何使 Mat-Slide-Toggle 充当单选按钮?

reactjs - typescript -字符串'不可分配给类型'FC

javascript - Angular react 形式在(更改)事件回调上具有旧值

node.js - 在客户端下载压缩文件夹在 Angular+Node 中不起作用(MEAN)

angular - 为什么我的 http 请求取消/停止 observables 流?

javascript - 将 httpClient 答案转换为模型对象 [Angular 6]