Angular组件输入更新时ngOnChanges仅触发一次的问题排查

• Angular的ngOnChanges钩子仅在输入属性的实际值/引用发生变更时触发：对于boolean、string、number这类原始类型值，Angular会做严格相等比较，新值与旧值完全一致时不会触发钩子。
• 你的业务逻辑中，对话框确认返回的res固定为true：第一次事件触发时，hasChanges从初始的undefined变为true，可以正常触发ngOnChanges；后续每次事件触发时，给hasChanges的赋值仍为true，与旧值完全相等，Angular判定输入属性无变化，因此不会调用ngOnChanges。

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

方案1：状态用完即重置，保证值能产生变化 #

处理完变更逻辑后主动将hasChanges重置为false，下次传入true时即可被正常检测到。

1. 给app-property-details新增输出事件，通知父组件状态处理完成：

// app-property-details.component.ts
@Output() changeProcessed = new EventEmitter<void>();

ngOnChanges(changes: SimpleChanges) {
  if(changes.hasChanges?.currentValue) {
    console.log('here')
    this.getData();
    // 逻辑执行完成后通知父组件重置状态
    this.changeProcessed.emit();
  }
}

2. 父组件app-main-details绑定重置事件：

<!-- app-main-details.component.html -->
<app-property-details 
  [hasChanges]="hasChanges"
  (changeProcessed)="hasChanges = false"
></app-property-details>

方案2：使用引用类型传递触发信号 #

对象、数组等引用类型仅比较引用地址，每次触发事件时传入一个新对象，即可保证输入属性的引用变化，稳定触发ngOnChanges。
调整app-main-details的事件处理逻辑：

// app-main-details.component.ts
inspectionPropertyGeneralDetailsEvent(event:any) {
  // 每次生成新对象，保证引用唯一
  this.hasChanges = {
    trigger: event,
    time: Date.now()
  };
}

对应修改app-property-details的输入属性类型，取值时判断currentValue.trigger即可。

方案3：用setter拦截输入属性，不依赖ngOnChanges #

给输入属性设置set拦截器，只要父组件发起赋值动作就会执行拦截逻辑，不受值是否相等的影响：

// app-property-details.component.ts
private _hasChanges: boolean;
@Input()
set hasChanges(val: boolean) {
  this._hasChanges = val;
  if (val) {
    console.log('here');
    this.getData();
  }
}
get hasChanges(): boolean {
  return this._hasChanges;
}

方案4：用共享服务+RxJS传递事件（适合多层级组件场景） #

当前事件跨3层组件传递，后续如果组件层级加深，层层emit的维护成本会很高，可以抽离全局共享服务，通过Subject发送触发事件，app-property-details直接订阅服务事件即可，完全不需要依赖输入属性传值，从根源上避免ngOnChanges触发问题。

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