18

例として、静的メソッド内からカスタム http サービスにアクセスする必要があります。

import {Control} from 'angular2/common';
import {HttpService} from './http.service';

class UsernameValidator {
    static usernameExist(control: Control): Promise<ValidationResult> { 
        ... /* Access my HTTPservice here */
    }
}

この場合、どのようにサービスにアクセスできますか?

4

3 に答える 3

10

もう 1 つのアプローチは、関数を返すことです。このようにして、この関数はHttpService作成中に提供されたインスタンスにアクセスできます。

class UsernameValidator {
  static createUsernameExist(http:HttpService) {
    return (control: Control) => { 
      ... /* Access my HTTPservice here */
    }
  }
}

その後、次のように使用できます。

validator: UsernameValidator.createUsernameExist(this.httpService)
于 2016-02-19T13:08:28.503 に答える
3 
class UsernameValidator {
    constructor(http:HttpService){}

    usernameExist(control: Control): Promise<ValidationResult> { 
        ... /* Access my HTTPservice here */
    }
}

次に、次のように使用します

validator: new UsernameValidator(http).usernameExist

代わりにコンポーネント コンストラクターに注入し、上記HttpServiceのように手動で作成したバリデーター インスタンスに渡す必要があります。

于 2016-02-19T12:53:45.307 に答える
1

Günter Zöchbauer's answerを使用して、これがバリデーターを実装して内部からサービスにアクセスする方法AsyncValidatorFnです...

私見では、依存関係を消費者コンポーネントから静的メソッドに渡してAsyncValidatorFn.

注入可能なバリデータ クラスを作成する

import { Injectable } from '@angular/core';
import { AbstractControl, AsyncValidatorFn, ValidationErrors } from '@angular/forms';

@Injectable
export class UsernameValidator {
  constructor(
    private http: HttpService,
  ) { }

  usernameExists: AsyncValidatorFn = (control: AbstractControl): Observable<ValidationErrors> => {
    // access your HttpService here...
  }
}

モジュール宣言でインジェクション用のバリデーターを提供する

@NgModule({
  providers: [
    UsernameValidator, // register your validator for injection
  ],
})
export class UserModule { }

コンポーネントフォームにバリデータ関数を設定する

constructor(
  private formBuilder: FormBuilder,
  private usernameValidator: UsernameValidator, // inject your validator
) { }

ngOnInit() {
  this.form = this.formBuilder.group({
    username: [
      null, // initial value
      [Validators.required], // sync validators
      [this.usernameValidator.usernameExists], // async validators
    ],
  });
}
于 2018-10-12T15:43:51.933 に答える