如何将组件的@Input()属性用作输入框的初始值

组件A嵌套组件B时，如何正确把组件B的@Input()属性值作为其内部输入框的初始值？尝试在构造函数中传入该值初始化表单时无效，只有在ngOnInit中重新构建表单才能生效，示例代码如下：

组件A模板 #

<component-b [(initialValue)]='initialValue'></component-b>

组件B代码 #

@Input() initialValue!: string;
public form: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    inputField: new FormControl(this.initialValue),
  });
}

ngOnInit() {
   this.form = this.formBuilder.group({
    inputField: new FormControl(this.initialValue),
  });
}

问题原因 #

Angular中，@Input()属性的赋值时机晚于构造函数执行阶段——构造函数运行时，父组件传递的initialValue还未绑定到子组件，此时this.initialValue是undefined，所以构造函数里初始化的表单控件拿不到正确的初始值。而ngOnInit是组件完成初始化、输入属性已成功绑定后的第一个生命周期钩子，这时候能获取到正确的initialValue。

正确解决方案 #

方案1：在ngOnInit中初始化表单（推荐，适用于初始值仅设置一次的场景）

直接移除构造函数中的表单初始化逻辑，只在ngOnInit中构建表单即可：

@Input() initialValue!: string;
public form: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.form = this.formBuilder.group({
    inputField: new FormControl(this.initialValue),
  });
}

方案2：用ngOnChanges监听输入属性变化（适用于初始值可能动态更新的场景）

如果父组件可能在组件生命周期中修改initialValue，可以通过ngOnChanges监听变化并更新表单控件：

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

@Input() initialValue!: string;
public form: FormGroup;

constructor(private formBuilder: FormBuilder) {
  // 先初始化空表单避免报错
  this.form = this.formBuilder.group({
    inputField: new FormControl(''),
  });
}

ngOnChanges(changes: SimpleChanges) {
  // 检测initialValue的变化（包括首次赋值）
  if (changes['initialValue']) {
    this.form.get('inputField')?.setValue(changes['initialValue'].currentValue);
  }
}

方案3：给@Input属性添加setter（另一种动态监听方式）

通过setter监听initialValue的变化，一旦值更新就同步到表单控件：

private _initialValue!: string;
public form: FormGroup;

constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    inputField: new FormControl(''),
  });
}

@Input() set initialValue(value: string) {
  this._initialValue = value;
  this.form.get('inputField')?.setValue(value);
}

get initialValue(): string {
  return this._initialValue;
}

内容的提问来源于stack exchange，提问作者sore-spot