NgOnChanges绑定@Input变量出现undefined，如何改用setter或OnPush？

为什么你的ngOnChanges方案显示undefined？ #

你的variableToBindInTemplate变量没有初始化默认值，且未处理inputVar初始未传入的场景：

• 组件初始化时如果inputVar没有被父组件传入，changes对象中不会包含inputVar的条目，导致变量始终保持undefined。
• 即使后续inputVar更新，若逻辑未覆盖边界情况（比如currentValue为undefined），也可能出现异常。

修复ngOnChanges的代码如下：

// 初始化默认值，避免undefined
variableToBindInTemplate = false;
@Input() inputVar: string[] | undefined;

ngOnChanges(changes: SimpleChanges): void {
  // 先判断inputVar是否在变更集合中
  if (changes.inputVar) {
    // 使用空值合并运算符处理undefined的情况
    this.variableToBindInTemplate = changes.inputVar.currentValue?.length > 0 ?? false;
  }
}

Setter vs OnPush变更检测策略怎么选？ #

1. Setter 更适合你的场景 #

如果只是监听单个Input变量的变化，Setter方案代码更简洁、直观，不需要处理整个SimpleChanges对象，直接绑定到Input上自动触发更新，完全满足你检查数组长度的需求。

2. OnPush 适合特定性能优化场景 #

OnPush变更检测策略会让组件只在以下情况触发变更检测：

• Input变量的引用发生变化（比如父组件传入新的数组对象，而不是原地修改现有数组的内容）
• 组件内部触发事件（比如点击、订阅等）
• 手动调用变更检测

如果你的inputVar经常是原地修改（比如用push/pop修改数组），OnPush会失效，因为引用没变化；只有当每次更新数组都生成新引用（比如用[...oldArray, newItem]或oldArray.slice()），OnPush才能正常工作。这种场景下需要父组件配合修改数据方式，成本更高。

使用Setter的组件代码修改 #

直接给inputVar添加Setter，同时可以保留原始值的私有变量（如果后续需要使用）：

// 私有变量存储原始input值，按需使用
private _inputVar: string[] | undefined;
// 初始化绑定变量，避免undefined
variableToBindInTemplate = false;

// 给Input添加Setter
@Input() set inputVar(value: string[] | undefined) {
  this._inputVar = value;
  // 计算绑定变量的值，空值合并运算符确保返回boolean类型
  this.variableToBindInTemplate = value?.length > 0 ?? false;
}

// 如果需要获取原始input值，可以加一个getter
get inputVar(): string[] | undefined {
  return this._inputVar;
}

模板中依然绑定{{variableToBindInTemplate}}即可，此时变量会在inputVar初始化或更新时自动计算，不会出现undefined的情况，同时避免了模板调用函数带来的性能损耗（模板函数会在每次变更检测时执行）。

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