ngOnChanges仅在对象引用变更时触发，如何检测对象属性变更？

老伙计，这问题我见太多了——Angular的ngOnChanges()确实只认引用变化，对象内部属性改了它根本不care。别慌，我给你整理了几个实用的解决方案，按需挑就行：

方案1：手动更新对象引用（最简单直接） #

这是最容易上手的办法：父组件修改对象属性后，重新生成一个新的对象引用，让Angular感知到变化。你可以用ES6的扩展运算符...或者Object.assign()来实现：

父组件代码示例： #

// 原对象
public user = { name: "Praveen", age: 30 };

// 修改属性并更新引用
updateUserAge() {
  // 用扩展运算符生成新对象
  this.user = { ...this.user, age: 31 };
  // 或者用Object.assign
  // this.user = Object.assign({}, this.user, { age: 31 });
}

这样一来，user的引用变了，子组件的ngOnChanges()就会被正常触发。优点是零额外依赖，代码简单；缺点是如果对象结构复杂，每次生成新对象可能有点繁琐，但大多数场景下足够用。

方案2：用KeyValueDiffers检测对象属性变化（无需修改父组件） #

如果不想动父组件的代码，子组件可以自己监听对象内部的属性变化。Angular提供了KeyValueDiffers工具，专门用来检测对象的键值对变化：

子组件代码示例： #

import { Component, Input, KeyValueDiffers, OnInit, DoCheck } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `{{ user.name }} - {{ user.age }}`
})
export class ChildComponent implements OnInit, DoCheck {
  @Input() user: any;
  private differ: any;

  constructor(private differs: KeyValueDiffers) {}

  ngOnInit() {
    // 为当前对象创建一个differ实例
    this.differ = this.differs.find(this.user).create();
  }

  ngDoCheck() {
    // 检查对象是否有属性变化
    const changes = this.differ.diff(this.user);
    if (changes) {
      // 遍历所有变化的属性
      changes.forEachChangedItem(item => {
        console.log(`属性 ${item.key} 从 ${item.previousValue} 变成了 ${item.currentValue}`);
      });
      // 这里可以执行原本在ngOnChanges里的逻辑
      this.handleUserChange();
    }
  }

  private handleUserChange() {
    // 处理对象变化的逻辑
  }
}

这个方案的好处是不用修改父组件，能精确检测到每个属性的变化；注意ngDoCheck会在Angular的每个变更检测周期执行，但KeyValueDiffers内部有缓存机制，性能开销不大，适合需要精细控制的场景。

方案3：使用Immutable数据结构（大型项目首选） #

如果你的项目数据结构复杂，频繁修改对象属性，推荐用Immutable数据结构（比如Immer、Immutable.js）。这类库的核心是修改数据时返回新的引用，从根源上解决引用不变的问题：

用Immer的示例（最流行的轻量库）： #

首先安装Immer：

npm install immer

然后父组件里用produce函数修改对象：

import { produce } from 'immer';

// 原对象
public user = { name: "Praveen", age: 30 };

updateUserAge() {
  // produce会返回一个新对象，原对象不会被修改
  this.user = produce(this.user, draft => {
    draft.age = 31;
  });
}

这样修改后，user的引用自动更新，子组件的ngOnChanges()会正常触发。优点是避免了手动管理引用的麻烦，适合大型应用；缺点是需要引入第三方库，有一点学习成本。

方案4：拆分对象属性为单独的@Input（适合简单对象） #

如果你的对象属性不多，直接把每个属性拆成独立的@Input()也是个好办法。因为基本类型（字符串、数字、布尔）的变化会被Angular直接检测到：

子组件代码： #

@Component({
  selector: 'app-child',
  template: `{{ userName }} - {{ userAge }}`
})
export class ChildComponent implements OnChanges {
  @Input() userName: string;
  @Input() userAge: number;

  ngOnChanges(changes: SimpleChanges) {
    // 任何一个属性变化都会触发这里
    if (changes.userAge) {
      console.log('年龄变了：', changes.userAge.currentValue);
    }
  }
}

父组件模板： #

<app-child [userName]="user.name" [userAge]="user.age"></app-child>

这个方案简单粗暴，不用处理引用问题，适合对象属性少的场景；缺点是如果属性太多，代码会变得冗余。

方案5：手动触发变更检测（灵活但需谨慎） #

子组件可以注入ChangeDetectorRef，在需要的时候手动触发变更检测。比如父组件修改属性后通过@Output通知子组件，子组件收到通知后手动更新：

子组件代码： #

import { Component, Input, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `{{ user.name }} - {{ user.age }}`
})
export class ChildComponent {
  @Input() user: any;

  constructor(private cdr: ChangeDetectorRef) {}

  // 父组件通过@Output调用这个方法
  onUserUpdated() {
    // 手动触发变更检测
    this.cdr.detectChanges();
    // 或者用markForCheck()标记组件需要检测
    // this.cdr.markForCheck();
  }
}

这个方案灵活性高，但需要父组件和子组件配合，适合一些特殊场景；注意不要滥用，否则可能影响性能。

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