如何在Angular父子组件之间共享实时更新的动态数组？

问题原因 #

Angular 对 @Input() 属性的默认变更检测仅判断引用是否发生变化。你当前对数组的操作（push、通过下标修改值）都属于修改原数组的内部元素，数组本身的引用地址没有变，因此变更检测不会触发，子组件无法感知到数组更新。

解决方案（按实现复杂度从低到高排序） #

方案1：每次更新数组时返回新数组（推荐，最适合父子组件传值场景） #

修改父组件的数组更新逻辑，不直接修改原数组，而是返回一个全新的数组，触发引用变更：

if (indexOfKey == -1) {
  this.crowsOnPerchDate.push(action.key);
  // 用扩展运算符生成新数组
  this.crownsOnPerchValues = [...this.crownsOnPerchValues, action.payload.val().value];
} else {
  // 用map生成新数组，替换对应下标值
  this.crownsOnPerchValues = this.crownsOnPerchValues.map((val, idx) => 
    idx === indexOfKey ? action.payload.val().value : val
  );
}

修改后不需要改动子组件任何代码，Angular 会自动检测到引用变化，将最新数组传递给子组件。

方案2：子组件主动监听数组内部变动 #

如果不想修改父组件的数组操作逻辑，可以在子组件中使用 IterableDiffers 检测数组内部元素的变化：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit, DoCheck {
  @Input() crowsOnPerch!: number[];
  private differ: any;

  constructor(private differs: IterableDiffers) {}

  ngOnInit() {
    // 初始化数组差异检测器
    this.differ = this.differs.find(this.crowsOnPerch).create();
  }

  ngDoCheck() {
    // 检测数组变化
    const changes = this.differ.diff(this.crowsOnPerch);
    if (changes) {
      // 数组发生变化，在这里执行你的后续逻辑，比如更新图表
      this.updateChart();
    }
  }

  private updateChart() {
    // 你的图表更新逻辑
  }
}

方案3：改用共享服务传递数据流（适合跨多层组件、多组件共享数据场景） #

如果后续有多个组件需要消费这份数据，可以在服务中定义 BehaviorSubject 分发数据：

1. 服务代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CrowDataService {
  private crowsOnPerchSubject = new BehaviorSubject<number[]>([]);
  public crowsOnPerch$ = this.crowsOnPerchSubject.asObservable();

  updateCrowsOnPerch(data: number[]) {
    this.crowsOnPerchSubject.next(data);
  }
}

2. 父组件每次更新数组后调用服务的更新方法：

// 数组更新完成后
this.crowDataService.updateCrowsOnPerch(this.crownsOnPerchValues);

3. 子组件订阅服务的数据流获取实时数据：

ngOnInit() {
  this.crowDataService.crowsOnPerch$.subscribe(data => {
    this.crowsOnPerch = data;
    // 执行更新逻辑
  })
}

额外检查点 #

注意你代码中数组命名的拼写差异：父组件初始化的数组名为 publicCrowsOnPerchValues，后续操作的变量为 crownsOnPerchValues（多了字母n），请确认实际代码中没有拼写错误导致变量不匹配。

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