Angular2 RC6 HttpModule 手动注入
Angular2 RC6 HttpModule manual injection
我正在将一个项目从 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();
});
});
}
}
只是将 HTTP_PROVIDERS
替换为 HttpModule
没有用,我在 Whosebug () 上发现了类似的测试问题,但唯一的答案是特定于测试的。
如何使用 RC6 手动 "inject" Http
或 HttpModule
,如果此自定义验证器有其他或更好的解决方案,我也愿意接受。
提前致谢。
更新:
checkVat
方法是静态的,这就是为什么我必须使用 ReflectiveInjector 而不是像其他地方一样通过构造函数注入它。
自定义验证器的使用方式如下:
this.vatCtrl = new FormControl("", Validators.compose([Validators.pattern(this.vatService.vatPattern)]),VatValidator.checkVat);
更新 2:
在 Günther Zöchbauer 的回答的帮助下,我按如下方式更改了代码,使其在没有静态功能且无需手动注入的情况下工作:
验证者:
@Injectable()
导出 class 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));
}
使用 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
}
如果稍微更改验证器 class,则不需要静态方法
@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);
另请参阅
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 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();
});
});
}
}
只是将 HTTP_PROVIDERS
替换为 HttpModule
没有用,我在 Whosebug () 上发现了类似的测试问题,但唯一的答案是特定于测试的。
如何使用 RC6 手动 "inject" Http
或 HttpModule
,如果此自定义验证器有其他或更好的解决方案,我也愿意接受。
提前致谢。
更新:
checkVat
方法是静态的,这就是为什么我必须使用 ReflectiveInjector 而不是像其他地方一样通过构造函数注入它。
自定义验证器的使用方式如下:
this.vatCtrl = new FormControl("", Validators.compose([Validators.pattern(this.vatService.vatPattern)]),VatValidator.checkVat);
更新 2: 在 Günther Zöchbauer 的回答的帮助下,我按如下方式更改了代码,使其在没有静态功能且无需手动注入的情况下工作:
验证者:
@Injectable()
导出 class 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));
}
使用 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
}
如果稍微更改验证器 class,则不需要静态方法
@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);
另请参阅
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,尽情享受吧!