Angular子组件监听@Input数组更新：Observable订阅失效问题

我来帮你搞定这个问题！你碰到的核心痛点其实是数组作为引用类型的特性导致的——当你在父组件里只是修改数组的内容（比如push、splice元素），而不是替换整个数组的引用时，Angular的变更检测不会认为@Input属性发生了变化，所以你的Observable订阅才只生效了一次。下面给你几种靠谱的实现方案，按需选择：

方案1：使用ngOnChanges生命周期钩子 #

这是最直接的方式，ngOnChanges会在@Input属性的引用发生变化时触发，我们可以在这里执行需要的函数。

子组件代码 #

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

@Component({
  selector: 'app-child',
  template: `<!-- 你的子组件模板 -->`
})
export class ChildComponent implements OnChanges {
  @Input() dataArray: any[] = [];

  ngOnChanges(changes: SimpleChanges) {
    // 检查dataArray是否发生了变化
    if (changes['dataArray']) {
      this.processUpdatedArray();
    }
  }

  private processUpdatedArray() {
    console.log('数组已更新，执行处理逻辑:', this.dataArray);
    // 这里写你的业务逻辑
  }
}

父组件注意事项 #

要让ngOnChanges触发，父组件更新数组时必须替换数组引用，而不是直接修改原数组内容。比如：

// 正确的更新方式：创建新数组
addItemToParentArray() {
  this.parentArray = [...this.parentArray, { id: Date.now(), name: '新元素' }];
}

// 错误的方式：直接修改原数组（不会触发变更检测）
// this.parentArray.push({ id: Date.now(), name: '新元素' });

方案2：使用@Input的setter方法 #

如果只需要监听单个@Input属性，用setter会比ngOnChanges更简洁，逻辑更聚焦。

子组件代码 #

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

@Component({
  selector: 'app-child',
  template: `<!-- 你的子组件模板 -->`
})
export class ChildComponent {
  private _dataArray: any[] = [];

  // 用setter监听Input变化
  @Input() set dataArray(value: any[]) {
    this._dataArray = value;
    this.processUpdatedArray();
  }

  // 提供getter供模板使用
  get dataArray(): any[] {
    return this._dataArray;
  }

  private processUpdatedArray() {
    console.log('数组已更新，执行处理逻辑:', this._dataArray);
    // 这里写你的业务逻辑
  }
}

父组件的更新方式和方案1一样，必须替换数组引用才能触发setter。

方案3：Observable + BehaviorSubject（符合你的需求） #

如果你坚持要用Observable实现，核心是要在数组每次变化时手动触发Observable的next()方法，而不是只订阅一次初始值。我们可以结合ngOnChanges来更新Subject：

子组件代码 #

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';

@Component({
  selector: 'app-child',
  template: `<!-- 你的子组件模板 -->`
})
export class ChildComponent implements OnInit, OnDestroy {
  @Input() dataArray: any[] = [];
  private dataSubject = new BehaviorSubject<any[]>([]);
  private subscription!: Subscription;

  ngOnInit() {
    // 订阅Subject，每次next都会触发回调
    this.subscription = this.dataSubject.subscribe(updatedArray => {
      this.processUpdatedArray(updatedArray);
    });
    // 传入初始值
    this.dataSubject.next(this.dataArray);
  }

  ngOnChanges() {
    // 每次Input变化时，通知Subject更新
    this.dataSubject.next(this.dataArray);
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.subscription.unsubscribe();
  }

  private processUpdatedArray(updatedArray: any[]) {
    console.log('数组已更新，执行处理逻辑:', updatedArray);
    // 这里写你的业务逻辑
  }
}

这种方式的好处是可以利用RxJS的操作符对数组做进一步处理（比如过滤、防抖等），非常适合复杂的业务场景。

关键提醒 #

再次强调：因为数组是引用类型，Angular的变更检测默认是浅比较——只有当数组的引用发生变化时，才会触发@Input的更新。所以父组件一定要用创建新数组的方式更新数据（比如扩展运算符[...]、Array.from()、slice()等），而不是直接修改原数组的内容。

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