3

プロジェクトを angular2 RC4 から RC6 に移行しています。必要なカスタム フォーム バリデーターがありますHttp。移行前は を と一緒に使用しReflectiveInjectorていましたHTTP_PROVIDERSが、RC6 ではHTTP_PROVIDERS非推奨であり、存在しないため、これはもはや不可能です。これは 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しませんでした。テストに関して、 stackoverflow ( NG2 RC5: HTTP_PROVIDERS is deprecatedHttpModule )で同様の問題を見つけましたが、唯一の答えはテストに固有のものです。

このカスタム Validator に別の解決策またはより良い解決策がある場合、手動で「注入」する方法、HttpまたはHttpModuleRC6 を使用する方法を教えてください。

前もって感謝します。

更新:checkVatメソッドは静的です。そのため、ReflectiveInjector を使用する必要があり、他の場所と同様に、コンストラクターを介して注入するだけではありません。カスタム Validator は次のように使用されます。

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

UPDATE2: 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));

}
4

3 に答える 3

12 
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 が含まれている必要があります。お楽しみください!

于 2016-09-15T04:42:09.153 に答える
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);

angular 2でHttpを手動で注入するも参照してください

于 2016-09-09T09:45:32.170 に答える
0

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
}
于 2016-09-09T08:28:58.557 に答える