Angular中父组件draft对象变更时ngOnChanges未触发求助

以下是针对你遇到的ngOnChanges未触发问题的常见排查点和解决方法：

• 未实现OnChanges接口
  Angular组件必须显式实现OnChanges接口，框架才会调用ngOnChanges方法。检查你的组件类是否添加了该接口实现：

  import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
  
  @Component({
    // 组件元数据
  })
  export class YourComponent implements OnChanges {
    @Input() draft: Contribution;
  
    ngOnChanges(changes: SimpleChanges) {
      debugger;
      if (changes.draft && changes.draft.currentValue) {
        this.loadDraft();
      }
    }
  }
  

• 仅修改对象内部属性而非引用
  Angular的变更检测基于引用对比，如果父组件只是修改draft对象的内部属性（如draft.content = 'updated'），而没有替换整个对象的引用，ngOnChanges不会触发。解决方式是在父组件中生成新对象：

  // 父组件更新draft的正确方式
  this.draft = {...this.draft, content: 'updated'};
  // 或使用Object.assign
  this.draft = Object.assign({}, this.draft, {content: 'updated'});
  

• 组件使用OnPush变更检测策略
  如果组件设置了ChangeDetectionStrategy.OnPush，只有当输入属性的引用发生变化，或组件内部手动触发变更检测时，才会执行变更检测。若父组件仅修改对象内部属性，需同时更新对象引用，或手动调用changeDetectorRef.markForCheck()触发检测。

• Input属性名拼写不一致
  检查父组件模板中绑定的属性名是否与子组件@Input()的名称完全一致，比如父组件是否误写为[draf]="draft"（缺少字母t），这种拼写错误会导致子组件无法感知到属性变更。

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