Angular中数组赋值触发ngOnChange，splice删元素却不触发问题

嘿，这个问题我太熟了！这其实是Angular变更检测机制里的一个常见坑，我来给你掰扯清楚原因和解决办法～

Angular的ngOnChanges钩子触发的核心逻辑是：只有当输入属性的引用发生改变时，它才会被调用。

数组属于引用类型，当你直接给this.entries赋值新数组（比如this.entries = [{"name": "John"}, ...]），这时候变量指向的是一个全新的数组对象，引用变了，所以ngOnChanges会正常触发。

但用splice、push、pop这类方法修改数组时，只是在原数组对象内部做修改，数组的引用还是原来的那个，Angular的变更检测会认为「输入属性没变化」，自然就不会触发ngOnChanges了。

方案1：创建新数组（最直观简单） #

每次修改数组时，返回一个新的数组实例，让引用发生变化。比如删除元素时用filter代替splice：

// 替换splice的删除逻辑
this.entries = this.entries.filter(item => item.name !== "Joe");

如果一定要用splice，修改后可以通过扩展运算符重新赋值，强制改变引用：

const joeIndex = this.entries.findIndex(item => item.name === "Joe");
if (joeIndex !== -1) {
  this.entries.splice(joeIndex, 1);
  // 重新生成新数组，触发引用变化
  this.entries = [...this.entries];
}

方案2：用IterableDiffers监听数组内部变化 #

如果不想每次都创建新数组，可以用Angular提供的IterableDiffers来检测数组内部的元素增删改，这样即使引用不变，也能监听到变化。

修改你的组件代码：

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

@Component({
  selector: 'app-component',
  // 你的模板配置...
})
export class InputComponent implements OnInit {
  @Input() entries: any[] = [];
  private differ: any;

  constructor(private differs: IterableDiffers) {
    // 初始化数组差异检测器
    this.differ = this.differs.find([]).create();
  }

  ngOnInit() {}

  ngDoCheck() {
    // 检测数组内部的变化
    const changes = this.differ.diff(this.entries);
    if (changes) {
      console.log('数组内部元素变了！当前数组:', this.entries);
      // 把原来ngOnChanges里的逻辑放在这里就行
    }
  }

  ngOnChanges() {
    console.log('数组引用变了！当前数组:', this.entries);
  }
}

ngDoCheck会在每次变更检测周期运行，IterableDiffers能精准捕捉到数组内部的差异，不管是splice还是push都能监听到。

方案3：手动触发变更检测（仅适合视图更新场景） #

如果你的需求只是让视图更新，而不需要触发ngOnChanges，可以注入ChangeDetectorRef手动标记组件需要变更检测：

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

@Component({
  selector: 'app-component',
  // 你的模板配置...
})
export class InputComponent {
  @Input() entries: any[] = [];

  constructor(private cdr: ChangeDetectorRef) {}

  deleteJoe() {
    const joeIndex = this.entries.findIndex(item => item.name === "Joe");
    if (joeIndex !== -1) {
      this.entries.splice(joeIndex, 1);
      // 手动触发变更检测，更新视图
      this.cdr.detectChanges();
    }
  }
}

注意：这个方法不会触发ngOnChanges，因为ngOnChanges还是依赖引用变化，所以如果你的逻辑必须在ngOnChanges里执行，这个方法就不适用了。

• ngOnChanges只认「引用变化」，引用类型（数组、对象）的内部修改不会触发它
• 优先用「创建新数组」的方案，简单直接，符合Angular的变更检测逻辑
• 需要监听内部变化时，IterableDiffers + ngDoCheck是最规范的做法

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