angular - 如何从 ControlValueAccessor 获取对 NgControl 的访问权限

Question

我正在构建一个自定义组件，它实现了 ControlValueAccessor，因此我可以在我的 from.xml 中将其与 ngControl 和 ngModel 一起使用。现在我想要逻辑来验证组件是否在其内部(以便它是自包含的)。到目前为止一切顺利，但现在我有一个循环依赖，因为我试图在一个组件中注入(inject) NgControl(以设置外部表单状态)，该组件自行注入(inject)一个 CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR提供商。这里的代码:

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR, {
    useExisting: forwardRef(() => CustomInput),
    multi: true
  });

@Component({
  moduleId: module.id,
  selector: 'custom-input',
  templateUrl: 'custom-input.html',
  styleUrls: ['custom-input.css'],
  directives: [CORE_DIRECTIVES],
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CustomInput implements ControlValueAccessor{

  private _text: any = '';
  public isValid:boolean = false;


  onChange: EventEmitter<any> = new EventEmitter();
  onTouched: any;


  constructor(private ngControl:NgControl) {

  }

  onToggle(){
    this.isValid = !this.isValid;
    let res = this.isValid? null:{ "test": true };
    this.ngControl.control.setErrors(res);
  }

  get text(): any { return this._text; };

  set text(v: any) {
    if (v !== this._text) {
      this._text = v;
      this.onChange.emit(v);
    }
  }

  writeValue(v) {
    this.text = v;
  }
  registerOnChange(fn): void {
    this.onChange.subscribe(fn);
  }
  registerOnTouched(fn): void {
    this.onTouched = fn;
  }

}

如何从组件中获取对 ngControl 的引用？我知道你可以这样做:this.ngControl = this._injector.get(NgControl, null); 但在这种情况下，这有点像 hack，不是吗？

Answer 1

您可以将 NgControl 注入(inject)到您的组件中。

constructor(@Self() @Optional() private ngControl: NgControl) {
    if (this.ngControl) {
      this.ngControl.valueAccessor = this;
    }
}

并删除 NG_VALUE_ACCESSOR 提供程序。