Angular子组件初始化读取electronics.fan报TypeError问题咨询

1. 类属性初始化时机早于@Input注入：Angular 组件的普通类属性会在构造函数执行阶段完成初始化，而 @Input 输入参数的赋值是在构造函数执行完毕、ngOnInit 生命周期触发前才会完成。直接在声明 myConfigurations 时读取输入参数的值，此时输入参数还未被赋值为 undefined，读取其属性就会抛出对应 TypeError。
2. 变量名拼写错误：子组件中定义的 @Input 变量名为 electronicsObj，但原代码读取属性时写的是 this.electronics.fan，变量名少了 Obj 后缀，该拼写问题也会导致读取不到目标对象。
3. 调用时机差异：display1 方法是点击按钮时才触发调用，此时组件已经完成初始化、@Input 已经完成赋值，所以可以正常读取到值。

可根据业务场景选择以下任意一种方案：

• 方案1：在ngOnInit生命周期中初始化（适合输入值不会动态变更的场景）

export class ElectronicsLayoutComponent implements OnInit {
  @Input() electronicsObj!: Electronics;
  // 仅声明变量，暂不初始化
  myConfigurations!: ElectronicsInterface;

  ngOnInit() {
    // 此时@Input已经完成注入，可安全读取
    this.myConfigurations = {
      fan: this.electronicsObj.fan,
      light: this.electronicsObj.light
    }
  }

  display1(){
    console.log(this.electronicsObj.fan);
  }
}

• 方案2：使用setter监听@Input变化（适合输入值会在父组件动态更新的场景）

export class ElectronicsLayoutComponent {
  private _electronicsObj!: Electronics;
  myConfigurations!: ElectronicsInterface;

  // 用setter监听输入值的变化，每次更新都同步配置
  @Input() set electronicsObj(val: Electronics) {
    this._electronicsObj = val;
    this.myConfigurations = {
      fan: val.fan,
      light: val.light
    }
  }

  get electronicsObj() {
    return this._electronicsObj;
  }

  display1(){
    console.log(this.electronicsObj.fan);
  }
}

• 方案3：可选链+默认值兜底（适合临时兼容场景）
  如果不需要严格同步输入值的初始状态，可直接加可选链和默认值避免报错：

@Input() electronicsObj!: Electronics;

myConfigurations: ElectronicsInterface = {
  fan: this.electronicsObj?.fan ?? '默认风扇参数',
  light: this.electronicsObj?.light ?? '默认灯光参数'
}

内容的提问来源于stack exchange，提问作者NiceBoy