Angular 2+中如何从另一个输入属性设置输入属性默认值？

这问题我之前在项目里也踩过坑！你原来的写法不生效，核心原因是组件初始化时this.totalCarsNumber还没被Angular完成赋值，直接在@Input()后面赋值的话，availableCarsNumber拿到的只会是undefined。

下面给你两种实用的解决方案，按需选择：

方案一：使用Setter/Getter实现动态同步 #

这种方式的好处是，不仅初始化时能同步值，后续如果totalCarsNumber发生变化，只要availableCarsNumber没被外部传入新值，就会自动同步更新：

// 用私有变量存储实际值
private _totalCarsNumber!: number;
private _availableCarsNumber?: number;

@Input()
set totalCarsNumber(value: number) {
  this._totalCarsNumber = value;
  // 仅当availableCarsNumber未被外部设置时，同步total的值
  if (this._availableCarsNumber === undefined) {
    this._availableCarsNumber = value;
  }
}
get totalCarsNumber(): number {
  return this._totalCarsNumber;
}

@Input()
set availableCarsNumber(value: number | undefined) {
  // 只有外部传入了有效值，才更新
  if (value !== undefined) {
    this._availableCarsNumber = value;
  }
}
get availableCarsNumber(): number {
  // 这里用!断言是因为total是必填项，初始化后available一定有值
  return this._availableCarsNumber!;
}

方案二：在ngOnInit中初始化默认值 #

如果你的场景不需要后续同步totalCarsNumber的变化，只需要初始化时设置默认值，用ngOnInit更简单——因为到这个生命周期阶段，所有输入属性都已经被Angular赋值完成了：

// 注意用小写number（原始类型），不要用大写Number（包装对象）
@Input() totalCarsNumber!: number;
@Input() availableCarsNumber?: number;

ngOnInit(): void {
  // 若available未传入，则设为total的值
  if (this.availableCarsNumber === undefined) {
    this.availableCarsNumber = this.totalCarsNumber;
  }
}

额外提醒 #

• 尽量用**小写number**而不是大写Number，Angular中推荐使用原始类型，避免不必要的包装对象问题；
• 如果需要监听totalCarsNumber的后续变化并同步，方案一的Setter更合适；如果只需要初始化一次，方案二更简洁。

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