【问题标题】:Using an injected angular service as a dependency within a static method使用注入的角度服务作为静态方法中的依赖项
【发布时间】:2016-07-19 11:02:01
【问题描述】:

我试图在静态方法中使用注入的依赖项,当然注入的依赖项是instance-scoped,不能在静态方法中使用。

这是我的课:

@Injectable()
export class PasswordValidationService {

  constructor(private userAccountService:UserAccountService) {
  }

  static passwordValidator(control:AbstractControl) {
    return control
      .valueChanges
      .debounceTime(400)
      .switchMap(()=> this.userAccountService.checkCurrentPassword(control.value))
      .map(res=> {
          if (res.json() === true) {
            return null;
          }
          else {
            return {invalid: true};
          }
        }
      );
  }

}

我的问题是在静态方法中使用UserAccountService(依赖)的最佳做法是什么?

编辑:我重新设计了我的应用程序以使用实例方法而不是静态方法,如下所示:

这里是验证器:

import {Injectable} from "@angular/core";
import {UserAccountService} from "../../useraccount/useraccount.service";
import {AbstractControl} from "@angular/common";
import {Observable} from "rxjs/Observable";


@Injectable()
export class PasswordValidationService {

  constructor(private userAccountService:UserAccountService) {
  }

  passwordValidator(control:AbstractControl):Observable<any> {
    let validationResult = this.userAccountService.checkCurrentPassword(control.value)
      .map(res=> {
          if (res.json() === true) {
            return null;
          }
          else {
            return {invalid: true};
          }
        }
      );

    return validationResult;
  }

}

这是使用验证器的组件:

constructor(private router:Router,
              private formBuilder:FormBuilder,
              private stylingService:StylingService,
              private sessionService:SessionService,
              private passwordValidationService:PasswordValidationService) {
  }

  ngOnInit() {
    this.signinForm = this.formBuilder.group({
      credentials: this.formBuilder.group({
        username: [this.credentials.username, Validators.required],
        password: [this.credentials.password, [Validators.required, this.passwordValidationService.passwordValidator]]
      })
    });
  }

这是我收到的错误消息:

browser_adapter.ts:82 TypeError: Cannot read property 'userAccountService' of undefined
    at PasswordValidationService.passwordValidator (http://localhost:8080/app/shared/services/password-validation.service.js:18:36)
    at eval (http://localhost:8080/vendor/@angular/forms/src/validators.js:137:49)
    at Array.map (native)
    at _executeValidators (http://localhost:8080/vendor/@angular/forms/src/validators.js:137:23)
    at FormControl.eval [as validator] (http://localhost:8080/vendor/@angular/forms/src/validators.js:116:33)
    at FormControl.AbstractControl._runValidator (http://localhost:8080/vendor/@angular/forms/src/model.js:178:56)
    at FormControl.AbstractControl.updateValueAndValidity (http://localhost:8080/vendor/@angular/forms/src/model.js:164:29)
    at new FormControl (http://localhost:8080/vendor/@angular/forms/src/model.js:304:14)
    at FormBuilder.control (http://localhost:8080/vendor/@angular/forms/src/form_builder.js:36:16)
    at FormBuilder._createControl (http://localhost:8080/vendor/@angular/forms/src/form_builder.js:68:25)

【问题讨论】:

    标签: typescript angular angular2-services


    【解决方案1】:

    不要将方法设为静态或从实例方法转发

    export class PasswordValidationService {
    
      constructor(private userAccountService:UserAccountService) {
      }
    
      validate(control:AbstractControl) {
        return PasswordValidationService.passwordValidator(control);
      }
    
      static passwordValidator(control:AbstractControl) {
        ...
      }
    }
    

    【讨论】:

    • 这对我来说没有多大意义。如果它需要调用一个静态方法,那么注入它是没有意义的。为什么需要静态方法?
    • 你明白我的意思吗?它需要在一个验证器数组中,如下所示:[Validators.required, ValidationService.passwordValidator]
    • 请注意,我总是可以拥有这里描述的功能:blog.thoughtram.io/angular/2016/03/14/…
    • 为什么不[injectedValidator.validate]?不需要静态方法。
    • 我猜你需要将验证器注册为[Validators.required, (control) =&gt; passwordValidationService.passwordValidator(control)]或``[Validators.required,passwordValidationService.passwordValidator.bind(passwordValidationService)]to make this`在passwordValidator中工作
    猜你喜欢
    • 2015-06-06
    • 1970-01-01
    • 2020-12-16
    • 2018-10-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-29
    相关资源
    最近更新 更多