在 afterViewInit 中对反应形式执行 patchValue 时使用 setTimeout 来避免 NG0100 是否可以？

Question

我有一个具有反应性 forms 的父子组件。 Child 通过 ControlValueAccessor 将更改传播给 parent。

我需要通过带有@Input注释变量的模板传递初始值（在实际应用程序中，我想从ngFor传递初始值，因此是@Input）。

我无法在子构造函数中创建 formGroup 期间设置传入的初始值，因为 @Input ed 值尚不可用。

出于同样的原因，我也无法在 ngOnInit 中设置它。

在 afterViewInit 中，我可以做到这一点，并且它正在工作，但只有当我将 patchValue 调用包装在 setTimeout 中时。 否则NG0100 : Expression has changed after it is checked 抛出错误：

ngAfterViewInit() {
  console.log('ngAfterViewInit called');
  // if I omit setTimeout then NG0100: ExpressionChangedAfterItHasBeenCheckedError
  // is it OK for using setTimeout for this?
  setTimeout(() => {
    this.formGroup.patchValue({
      firstName: this.initialFirstName,
    });
  }, 0);
}

使用setTimeout可以避免报错，可靠吗？ 有更好的解决方案吗？

整件事都在这里： https://stackblitz.com/edit/angular-ivy-rohjor?file=src/app/name-input/name-input.component.ts

Answer 1

它本来可以在ngOnInit内部工作，但问题是您的控件值访问器的更改处理程序尚未注册。 您可以像这样在registerOnChange处理程序中执行此操作：

public registerOnChange(fn: any): void {
  console.log('registerOnChange called');
  this.onChange = fn;

  this.setUpDefaultValues();
}

private setUpDefaultValues(): void {
  this.formGroup.patchValue({
    firstName: this.initialFirstName,
  });
}

这样，当ngOnInit方法中的订阅处理程序被命中时， this.onChange将具有正确的值（通过控制值访问器注册的值）。

我建议您停止为这些控制值访问器处理程序提供默认值，因为这样，您实际上会得到更有意义的错误（例如Error: this.onChange is not a function ）应该为您触发此警报并让您知道您在注册之前尝试使用处理程序：

private onChange?: (value: any | null) => void;