Angular子组件@Input对象与数组变更未被检测，代码问题何在？

我查阅了两个相关问题但没找到有用答案，现在遇到一个Angular组件传值的问题：需要通过@Input()向子组件传递多种类型数据，包括字符串、数字、布尔值、对象和数组。

父组件代码 #

HTML部分 #

<app-child
  [stringData]="stringData"
  [numberData]="numberData"
  [booleanData]="booleanData"
  [objectData]="objectData"
  [arrayData]="arrayData"
></app-child>

<button (click)="changeData()">Change data</button>

TypeScript部分 #

stringData: string = 'testing something';
numberData: number = 0;
booleanData: boolean = false;
objectData: any = {
  student: { name: 'tanzeel', batch: 2016 },
};
arrayData: any[] = ['banana'];

constructor() {}

changeData() {
  this.stringData = 'rolex watch';
  this.numberData = 100;
  this.booleanData = true;
  this.objectData.student.name = 'tajknzeel';
  this.arrayData.push('apple');
}

子组件代码 #

TypeScript部分 #

@Input() stringData: any;
@Input() numberData: any;
@Input() booleanData: any;
@Input() objectData: any;
@Input() arrayData: any;

ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
}

问题现象 #

点击按钮修改数据后，ngOnChanges只检测到字符串、数字、布尔值的变化，objectData和arrayData的变更没被捕获。控制台输出如下：

{
    "stringData": {
        "previousValue": "testing something",
        "currentValue": "rolex watch",
        "firstChange": false
    },
    "numberData": {
        "previousValue": 0,
        "currentValue": 100,
        "firstChange": false
    },
    "booleanData": {
        "previousValue": false,
        "currentValue": true,
        "firstChange": false
    }
}

请问我的代码哪里有问题？

核心原因 #

Angular的ngOnChanges只在输入属性的引用发生变化时才会触发。字符串、数字、布尔值是原始类型，修改时会直接替换整个值（生成新的引用），所以能被检测到；而对象和数组是引用类型，你修改的是它们内部的属性/元素，并没有改变objectData和arrayData本身的引用地址，因此ngOnChanges不会触发。

解决方案 #

方案1：修改引用（推荐） #

在修改对象或数组时，创建新的引用，让Angular检测到变化：

changeData() {
  this.stringData = 'rolex watch';
  this.numberData = 100;
  this.booleanData = true;
  // 修改对象：通过扩展运算符创建新对象
  this.objectData = {
    ...this.objectData,
    student: {
      ...this.objectData.student,
      name: 'tajknzeel'
    }
  };
  // 修改数组：通过扩展运算符创建新数组
  this.arrayData = [...this.arrayData, 'apple'];
}

方案2：使用DoCheck钩子手动检测 #

如果不想修改引用，可以在子组件中实现DoCheck钩子，手动对比对象/数组的内容变化：

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

export class ChildComponent implements OnInit, DoCheck {
  @Input() stringData: any;
  @Input() numberData: any;
  @Input() booleanData: any;
  @Input() objectData: any;
  @Input() arrayData: any;

  private previousObjectData: string;
  private previousArrayData: string;

  ngOnInit() {
    // 初始化保存初始值的序列化结果
    this.previousObjectData = JSON.stringify(this.objectData);
    this.previousArrayData = JSON.stringify(this.arrayData);
  }

  ngDoCheck() {
    // 对比当前值与之前的序列化结果
    const currentObjectStr = JSON.stringify(this.objectData);
    if (currentObjectStr !== this.previousObjectData) {
      console.log('objectData 发生变化:', this.objectData);
      this.previousObjectData = currentObjectStr;
    }

    const currentArrayStr = JSON.stringify(this.arrayData);
    if (currentArrayStr !== this.previousArrayData) {
      console.log('arrayData 发生变化:', this.arrayData);
      this.previousArrayData = currentArrayStr;
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

注意：JSON.stringify仅适用于无复杂结构的对象/数组（不含函数、循环引用等），复杂场景需要自定义深度对比函数。

方案3：手动触发变更检测 #

在父组件修改内部属性后，通过ChangeDetectorRef手动通知Angular进行变更检测，但这种方式不会触发ngOnChanges，仅能更新子组件视图：

// 父组件代码
import { ChangeDetectorRef } from '@angular/core';

constructor(private cd: ChangeDetectorRef) {}

changeData() {
  this.objectData.student.name = 'tajknzeel';
  this.arrayData.push('apple');
  this.cd.detectChanges(); // 手动触发变更检测
}

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