Angular修改@Input()对象属性时子组件不识别更新如何解决

Angular 对@Input()传入的非原始类型值（对象、数组）默认只做引用层面的变更检测：

• 直接修改gameStats对象的内部属性gameRunning时，gameStats本身的内存引用没有发生任何变化，因此ngOnChanges钩子不会触发，这是框架的默认机制，不是代码逻辑错误。
• ngDoCheck拿不到新值，本质是这个钩子会在每一次变更检测周期全量执行，不会自动帮你追踪对象内部属性的变化，没有手动做属性差异比对的话，自然感知不到内部值的更新。

方案1：更新属性时替换对象引用（推荐优先使用，改造成本最低） #

不要直接修改原对象的内部属性，每次更新时生成一个全新的对象赋值给gameStats，引用变更后ngOnChanges会正常触发，子组件能直接拿到最新值：

// app.component.ts 中修改属性更新逻辑
onRunningStatusChanged(event: any) {
  this.gameStats = {
    ...this.gameStats,
    gameRunning: event
  };
}

父组件模板原有写法、子组件@Input()写法不需要做任何改动，就能正常感知变更。

方案2：子组件手动实现对象内部属性差异监听 #

如果不想改动父组件的原有赋值逻辑，可以在子组件借助Angular自带的KeyValueDiffers工具，在ngDoCheck中手动追踪对象属性变化：

// settings.component.ts
import { Component, Input, DoCheck, KeyValueDiffers } from '@angular/core';

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html'
})
export class SettingsComponent implements DoCheck {
  @Input() gameStats!: GameStats;
  private valueDiffer: any;

  constructor(private differs: KeyValueDiffers) {}

  ngOnInit() {
    // 初始化对象差异监听器
    this.valueDiffer = this.differs.find(this.gameStats).create();
  }

  ngDoCheck() {
    const changes = this.valueDiffer.diff(this.gameStats);
    if (changes) {
      // 检测到内部属性变更，遍历变更项
      changes.forEachChangedItem(changeItem => {
        // 示例：识别gameRunning属性的变更
        if (changeItem.key === 'gameRunning') {
          const oldValue = changeItem.previousValue;
          const newValue = changeItem.currentValue;
          // 在这里写属性变更后的业务逻辑即可
        }
      })
    }
  }
}

方案3：用可观察对象传递状态 #

如果这个状态需要在多层组件间共享传递，可以把状态包装为RxJS的BehaviorSubject，通过订阅的方式推送最新值，从根源上规避变更检测不触发的问题：

// 父组件中定义状态流
private readonly gameStatsInitial: GameStats = { /* 初始属性值 */ };
gameStats$ = new BehaviorSubject<GameStats>(this.gameStatsInitial);

onRunningStatusChanged(event: any) {
  const updatedStats = {
    ...this.gameStats$.value,
    gameRunning: event
  };
  this.gameStats$.next(updatedStats);
}

父组件模板传值时直接用async管道解流即可：

<app-settings [gameStats]="gameStats$ | async"></app-settings>

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