Angular2数组输入时ngOnChanges钩子不触发问题求助

安全阿岳

2026-8-11

问题原因与解决方案

这是因为Angular的ngOnChanges钩子依赖引用变更检测：

数字是值类型，每次this.num = this.num + 1都会生成新值，Angular能检测到输入变更，触发钩子。
数组是引用类型，push操作只是修改数组内部元素，数组本身的内存引用地址没有变化，Angular会判定输入未变更，因此不触发ngOnChanges。

解决方法1：替换数组引用（最常用）

修改父组件的changeArray方法，每次修改时创建新数组，让引用地址发生变化：

changeArray() {
  // 用扩展运算符创建新数组并添加元素
  this.arr = [...this.arr, 'some value'];
  // 也可以用concat方法
  // this.arr = this.arr.concat('some value');
}

这样Angular检测到arr的引用变更后，就会触发子组件的ngOnChanges钩子。

解决方法2：手动检测数组变化（使用ngDoCheck）

如果不想改变数组引用，可以在子组件中通过ngDoCheck钩子手动对比数组内容的变化：

import { DoCheck, KeyValueDiffer, KeyValueDiffers } from '@angular/core';

export class ChildComponent implements OnInit, DoCheck {
  @Input() num = 0;
  @Input() arr: Array<string> = [];
  private arrDiffer: KeyValueDiffer<any, any>;

  constructor(private differs: KeyValueDiffers) { }

  ngOnInit(): void {
    this.arrDiffer = this.differs.find(this.arr).create();
  }

  ngDoCheck() {
    const changes = this.arrDiffer.diff(this.arr);
    if (changes) {
      console.log('数组内容发生变化');
      // 在这里处理数组变化的业务逻辑
    }
  }

  ngOnChanges() {
    console.log('input changed');
  }
}

注意：ngDoCheck会在每次变更检测周期触发，性能开销比ngOnChanges大，非必要场景不推荐使用。