Angular父组件给数组赋值时子组件未更新问题问询

1. 子组件未触发更新的原因 #

Angular的变更检测机制中，对于@Input()绑定的引用类型数据（比如数组、对象），默认只会检测引用地址的变化。如果你是通过push、splice、直接改下标值等方法修改原数组，数组的内存引用地址没有发生变化，子组件会认为输入属性没有更新，自然不会触发重新渲染。如果子组件还开启了ChangeDetectionStrategy.OnPush优化，这个现象会更明显。

2. 去重逻辑后续失效的原因 #

首次拦截第三个重复值后，你没有正确重置重复计数的状态变量：

• 如果是统计连续重复次数，第一次拦截后应该保留计数为2，而不是继续累加或者直接清零
• 如果新增的内容和之前的重复值不同时，没有把计数重置为1，会导致后续的重复统计基准错误，自然无法正确拦截后续的第三次重复值。

• 修改数组时始终生成新的数组引用：不要直接修改原数组，每次操作后返回新数组赋值给绑定变量，示例代码如下：

// 新增元素写法
this.list = [...this.list, newItem];
// 删除末尾元素写法
this.list = this.list.slice(0, -1);
// 过滤元素写法
this.list = this.list.filter(item => item !== targetVal);

• 修正去重计数逻辑：每次新增值时先和数组最后一位元素比对，相同则计数+1，不同则重置计数为1，只有计数小于3时才允许新增到数组中。
• 如果需要保留原数组修改的写法，可以给子组件注入ChangeDetectorRef，在父组件修改完数组后手动调用markForCheck()触发变更检测，但更推荐使用新引用的方案，更符合Angular单向数据流的设计规范。

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