Angular @Input getter/setter与非原始值：嵌套属性变更触发问题

我太懂这个坑了！当子组件绑定父组件传过来的深层嵌套复杂对象时，哪怕嵌套属性肉眼可见更新了，Angular的ngOnChanges也只会在对象第一次传入（引用变化）时触发，内部属性变更根本不会触发钩子——这完全是因为Angular默认是通过引用对比来检测输入属性变化的，嵌套属性改了但对象引用没变，Angular就认为“没变化”。

下面给你三个实用的解决方案，覆盖不同场景：

方法1：用KeyValueDiffers监听对象内部变化（子组件独立实现） #

这是Angular官方推荐的处理这类场景的方案，不需要父组件配合，子组件自己就能追踪对象的所有键值对变化，不管是顶层还是嵌套属性。

实现步骤： #

1. 在子组件构造函数中注入KeyValueDiffers
2. 在ngOnInit里为目标对象创建一个differ实例
3. 在ngDoCheck中检查differ的变化，一旦有变更就执行你的目标函数

代码示例： #

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

@Component({
  selector: 'app-child',
  template: `<!-- 你的子组件模板内容 -->`
})
export class ChildComponent implements OnInit, DoCheck {
  @Input() complexObj: any;
  private differ: any;

  constructor(private differs: KeyValueDiffers) {}

  ngOnInit(): void {
    // 为传入的复杂对象创建differ实例
    this.differ = this.differs.find(this.complexObj).create();
  }

  ngDoCheck(): void {
    if (this.differ) {
      const changes = this.differ.diff(this.complexObj);
      if (changes) {
        // 这里就是你要触发的函数，想干啥都行
        this.handleObjChange();
      }
    }
  }

  private handleObjChange(): void {
    console.log('对象的某个属性（包括嵌套的）变更了！');
    // 执行你的业务逻辑，比如更新视图、调用接口等
  }
}

小提醒：ngDoCheck会在每次变更检测周期都运行，所以里面的逻辑尽量写得轻量一点，别搞太复杂的计算，避免影响性能。

方法2：用BehaviorSubject+Async管道（需要父组件配合） #

如果父组件可以调整代码，用RxJS的响应式方式来处理会更优雅，性能也更好。把复杂对象包装成可观察对象，子组件通过async管道订阅，不管内部属性怎么变，只要父组件发出新的通知，子组件就能立即响应。

父组件代码： #

import { Component } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `<app-child [complexObj$]="complexObj$"></app-child>`
})
export class ParentComponent {
  // 用BehaviorSubject保存对象的最新状态
  private complexObjSource = new BehaviorSubject<any>({
    user: { name: 'Alice', age: 30 },
    settings: { theme: 'light' }
  });
  // 对外暴露可观察对象，供子组件订阅
  complexObj$ = this.complexObjSource.asObservable();

  // 更新嵌套属性的正确方式：创建新的对象引用并发出
  updateUserAge(): void {
    const currentObj = this.complexObjSource.value;
    this.complexObjSource.next({
      ...currentObj,
      user: { ...currentObj.user, age: 31 }
    });
  }
}

子组件代码： #

import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-child',
  template: `<!-- 用async管道订阅，自动处理订阅和取消订阅 -->
             <div>{{ complexObj$ | async | json }}</div>`
})
export class ChildComponent implements OnInit {
  @Input() complexObj$!: Observable<any>;

  ngOnInit(): void {
    this.complexObj$.subscribe(updatedObj => {
      // 每次对象更新（包括嵌套属性）都会触发这里
      this.handleObjChange(updatedObj);
    });
  }

  private handleObjChange(obj: any): void {
    console.log('对象更新啦：', obj);
    // 执行你的业务逻辑
  }
}

这个方法的好处是利用了RxJS的响应式特性，变更检测更精准，而且async管道会自动帮你管理订阅，不用担心内存泄漏。

方法3：用不可变对象（最简单但有局限性） #

如果你能保证每次更新嵌套属性时都创建新的对象引用，Angular的ngOnChanges就能正常触发了。比如用扩展运算符、Object.assign或者Immutable.js这类库来生成新对象。

父组件中更新的正确姿势： #

// ❌ 错误：直接修改嵌套属性，引用不变，子组件ngOnChanges不会触发
this.complexObj.user.age = 31;

// ✅ 正确：创建新的对象引用，Angular能检测到变化
this.complexObj = {
  ...this.complexObj,
  user: { ...this.complexObj.user, age: 31 }
};

子组件代码： #

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

@Component({
  selector: 'app-child',
  template: `<!-- 你的子组件模板 -->`
})
export class ChildComponent implements OnChanges {
  @Input() complexObj: any;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['complexObj']) {
      // 现在只要对象引用变了（不管是顶层还是嵌套属性导致的），这里都会触发
      this.handleObjChange();
    }
  }

  private handleObjChange(): void {
    console.log('对象属性变更了！');
    // 执行你的业务逻辑
  }
}

这个方法最简单，但如果对象层级特别深，手动写扩展运算符会很繁琐，适合结构不太复杂的对象。

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