Angular2 RC6 HttpModule 手动注入 [英] Angular2 RC6 HttpModule manual injection

问题描述

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

I'm migrating a project from angular2 RC4 to RC6 and I have a custom Form Validator which needs Http. Before the migration I used the ReflectiveInjector with the HTTP_PROVIDERS, but with RC6 this is not possible anymore as HTTP_PROVIDERS is deprecated, respectively not present anymore. This is the static method in the Validator:

    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 已弃用) 关于测试，但唯一的答案是针对测试的.

Just replacing HTTP_PROVIDERS with HttpModule didn't work, I found a similar problem here on stackoverflow (NG2 RC5: HTTP_PROVIDERS is deprecated) regarding testing, but the only answer is specific for testing.

我如何使用 RC6 手动注入"Http 或 HttpModule，如果此自定义验证器有其他或更好的解决方案，我也对此持开放态度.

How do I manually "inject" Http or HttpModule with RC6, if there is another or better solution for this custom Validator I'm open to that too.

提前致谢.

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

UPDATE: The checkVat method is static, that is why I had to use the ReflectiveInjector and not just inject it via the constructor, like everywhere else. The custom Validator gets used like this:

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

更新2:在 Günther Zöchbauer 的回答的帮助下，我将代码更改如下，使其在没有静态函数的情况下工作，也不需要手动注入:

UPDATE2: With the help of Günther Zöchbauer's answer I changed the Code as follows to get it working without a static function and no need for manual injection:

验证者:

@Injectable()

导出类增值税验证器{

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 的组件中:

In the component which has the FormControl:

    constructor(private vatValidator: VatValidator) {

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

}

推荐答案

如果你稍微改变你的验证器类，你就不需要静态方法

If you change your validator class a bit, you don't need a static method

@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) 中传递它的依赖项

• inject it to your component so DI passes it's dependencies in (Http)

constructor(private pattern:PatternValidator) {}

• 使用 bind(pattern) 传递它，以便 .this 在验证器函数中继续工作
• pass it with bind(pattern) so .this keeps working inside the validator function

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

另见在angular 2中手动注入Http

这篇关于Angular2 RC6 HttpModule 手动注入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！