Angular组件输入为嵌套对象数组时，如何触发输入变化检测？

嘿，我刚好碰到过一模一样的问题！Angular的ngOnChanges确实有个“小脾气”——它只对输入属性的引用变化敏感。如果你的Input是嵌套对象或者数组，只是修改内部元素（比如给数组push新项、修改对象某个属性），对象/数组本身的引用没改，Angular就会觉得“这东西没变化啊”，自然不会触发ngOnChanges。

结合你说的场景：两个子组件共用父FormGroup的FormControl，把第一个控件的值传给第二个子组件，数组修改时没触发变更检测。下面给你几个实用的解决方案，按需选就行：

方案1：用Immutable方式更新数据（推荐） #

核心思路是每次修改数据时，生成一个新的引用，让Angular能检测到变化。比如处理数组时，用扩展运算符、map/filter这些返回新数组的方法；处理对象时用Object.assign或者扩展运算符。

针对你的表单场景，在父组件里订阅第一个FormControl的valueChanges，每次值变化时生成新的引用传给子组件：

// 父组件代码
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-parent',
  template: `
    <app-first-child [formGroup]="parentForm"></app-first-child>
    <app-second-child [targetData]="passedData"></app-second-child>
  `
})
export class ParentComponent implements OnInit {
  parentForm: FormGroup;
  passedData: any[];

  ngOnInit() {
    this.parentForm = new FormGroup({
      sourceCtrl: new FormControl([]), // 第一个FormControl
      targetCtrl: new FormControl('')  // 第二个FormControl
    });

    // 监听第一个控件的值变化，生成新引用
    this.parentForm.get('sourceCtrl').valueChanges.subscribe(currentValue => {
      // 确保每次传递的都是新数组
      this.passedData = Array.isArray(currentValue) ? [...currentValue] : currentValue;
    });
  }
}

这样子组件的@Input() targetData每次都会收到新的数组引用，ngOnChanges肯定会触发。

方案2：在子组件用Input Setter+深比较 #

如果不想修改父组件的代码，也可以在子组件里给Input加个setter，手动做深比较判断数据是否真的变化了。这里可以用lodash的isEqual（需要先安装lodash），或者自己写深比较函数：

// 子组件代码
import { Component, Input } from '@angular/core';
import * as _ from 'lodash';

@Component({
  selector: 'app-second-child',
  template: `<!-- 你的子组件模板 -->`
})
export class SecondChildComponent {
  private _targetData: any[];

  @Input() set targetData(newData: any[]) {
    // 深比较新旧数据，判断是否真的变化
    if (!_.isEqual(newData, this._targetData)) {
      this._targetData = newData;
      // 这里写你需要执行的逻辑
      this.processNewData();
    }
  }

  get targetData(): any[] {
    return this._targetData;
  }

  private processNewData() {
    console.log('数据更新啦:', this._targetData);
    // 比如同步到子组件的表单控件里
    // this.childForm.get('xxx').setValue(this._targetData);
  }
}

这个方案的好处是子组件自己搞定一切，不用动父组件，但深比较会有一点点性能开销，数据量大的时候要注意。

方案3：用DoCheck钩子手动检测（谨慎使用） #

DoCheck钩子会在每次Angular变更检测周期都运行，你可以在里面手动对比输入属性的前后值。不过要注意，DoCheck触发频率很高，别在里面加太重的逻辑，不然会影响性能：

// 子组件代码
import { Component, Input, DoCheck, IterableDiffers } from '@angular/core';

@Component({
  selector: 'app-second-child',
  template: `<!-- 模板 -->`
})
export class SecondChildComponent implements DoCheck {
  @Input() targetData: any[];
  private differ: any;

  constructor(private differs: IterableDiffers) {
    this.differ = this.differs.find([]).create();
  }

  ngDoCheck() {
    const changes = this.differ.diff(this.targetData);
    if (changes) {
      // 数据有变化，执行逻辑
      this.processNewData();
    }
  }

  private processNewData() {
    // 你的业务逻辑
  }
}

这个方案适合复杂的集合变化检测，但一般情况下方案1或2足够用了。

为什么会出现这个问题？ #

再啰嗦两句原理：Angular默认的变更检测是浅比较——对于基本类型（字符串、数字、布尔）比较值，对于对象/数组只比较引用。当你修改数组内部元素或者对象属性时，对象/数组的引用还是原来的那个，Angular就认为输入属性没变化，所以ngOnChanges不触发。

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