如何在Angular 6导出功能中使用依赖注入

Question

I have tried this

export function uniqueUserNameValidation(commonsService: CommonsService): AsyncValidatorFn {
  return (c: AbstractControl): Promise < ValidationErrors | null > | Observable < ValidationErrors | null > => {
    return commonsService.uniqueUserName(c.value).pipe(
      map(data => {
        return data && data.status ? {
          'uniqueValidation': true
        } : null
      })
    )
  }
}

Common Services Method

uniqueUserName(name:string){
        return this.http.get<booleanData>(constDefault.API_URL+"/commons/nameAlreadyExist/"+name+"/Tank")
}

I am getting this error

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'uniqueUserName' of undefined TypeError: Cannot read property 'uniqueUserName' of undefined

Answer 1

Angular's automatic dependency injection only works for angular component constructors (which are being managed by the DI system).

As a solution to the specific problem shown in the question, you can inject the service into the component which will be calling the uniqueUserNameValidation and then pass the service as an argument to uniqueUserNameValidation . I think that, in general, this would be the preferred solution to your problem because it doesn't stray from standard angular practices.

Example

export class MyComponent {
  constructor(private commonsService: CommonsService, private fb: FormBuilder) {}

  ngOnInit() {
    const form = this.fb.group({
      name: ['', uniqueUserNameValidation(this.commonsService)]
    })
  }
}

Answer 2

I assume that your CommonsService is a proper Angular Service. If so, you could use Injector .

First import and declare the Injector in your module (app.module.ts etc.) and in the constructor of module init the instance:

import {Injector} from '@angular/core';

export let InjectorInstance: Injector;

...
...
...


export class AppModule {

  constructor(private injector: Injector) {
    InjectorInstance = this.injector;
  }
}

Then in your file that is exporting the function, import the variable from the module:

import {InjectorInstance} from 'path/to/app.module';

Then you can use the .get() method of Injector to get the service instance:

export function uniqueUserNameValidation(): AsyncValidatorFn {

  const commonsService = InjectorInstance.get<CommonsService>(CommonsService);

  return (c: AbstractControl): Promise < ValidationErrors | null > | Observable < ValidationErrors | null > => {
    return commonsService.uniqueUserName(c.value).pipe(
      map(data => {
        return data && data.status ? {
          'uniqueValidation': true
        } : null
     })
    )
  }
}