从Angular2中的自定义验证器访问服务

时间:2016-02-19 12:35:39

标签: angular angular2-forms angular2-di

我需要从静态方法中访问我的自定义http服务,例如:

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

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

在这种情况下如何访问服务?

3 个答案:

答案 0 :(得分:7)

另一种方法是返回一个函数。这样,此函数可以访问创建期间提供的HttpService实例:

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

然后你可以这样使用它:

validator: UsernameValidator.createUsernameExist(this.httpService)

答案 1 :(得分:3)

class UsernameValidator {
    constructor(http:HttpService){}

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

然后像

一样使用它
validator: new UsernameValidator(http).usernameExist

HttpService需要在组件构造函数中注入,然后传递给手动创建的验证器实例,如上所示。

答案 2 :(得分:1)

使用Günter Zöchbauer's answer就是我实现验证器以从RowExpander内部访问服务的方式...

  

恕我直言,让DI直接将服务依赖项注入到验证器类中似乎更清洁,而不是将依赖项从使用者组件传递到静态方法以创建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 { }