Question

你好，我不明白为什么注入不正确。引发此错误：
无法读取未定义的属性“ productService” 在ProductValidator.validateCodeUnique（product-validator.ts：23）

@Injectable()
export class ProductValidator {

  constructor(public productService: ProductService) { }

  validateCodeUnique(input: FormControl) {
    const code: string = input.value;
    let isUnique = true;
    this.productService.getAllProducts().forEach((product, key) => {
      if (product.code === code) {
        isUnique = false;
      }
    });
    return isUnique ? null : { notValid: true };
  }
}
 validateCodeLength(input: FormControl) {
    const codeLength: number = input.value.length;
    const hasIncorrectLength = codeLength < 1 || codeLength > 10;
    return hasIncorrectLength ? null : { notValid: true };
  }

ProductService也被标注为Injectable：

@Injectable()
export class ProductService {
...
}

我在模块的提供程序中都声明了它们：

providers: [ProductService, ProductValidator]

然后我从另一个模式窗口调用Validator：

export class AddDialogComponent {
code = new FormControl('', [this.productValidator.validateCodeLength, this.productValidator.validateCodeUnique]);

constructor(public dataService: ProductService,
    public productValidator: ProductValidator)
...
}

validateCodeLength工作正常，有人知道为什么不注入ProductService吗？我正在将ProductService注入另一个运行良好的组件中。不知道我在这里想念什么

Answer 1

我重现了您的错误，实际上，您每次需要访问上下文变量（即 this 变量）时都必须将上下文变量绑定到您的验证函数。

我总是对这些情况进行myValidationFunction.bind(this)，因为验证功能总是在与创建 FormControl 的同一 Component 中声明，但您的情况是一个特定的。

为了使您的代码运行，我必须：

this.productValidator.validateCodeUnique.bind(this.productValidator)

这是因为您不希望上下文变量 this （在验证功能内）成为您在 AddDialogComponent 上创建 FormControl < / strong>，您实际上希望它成为 ProductValidator 实例。

希望有帮助。

注入服务与注入服务

1 个答案: