Angular中@Input结合BehaviorSubject的实现方案是否最优？

• 未监听输入变更：ngOnInit仅在组件初始化时执行一次，父组件更新mesures输入值时，子组件不会自动触发校验
• 冗余的状态管理：当前场景下无需额外引入BehaviorSubject，直接基于@Input属性处理即可，额外的Subject增加了不必要的复杂度
• RxJS反模式：直接调用getValue()获取Subject值可能导致状态不同步，违背响应式编程的核心原则
• 内存泄漏风险：未在组件销毁时取消订阅，长期运行可能引发内存泄漏

推荐使用ngOnChanges生命周期钩子监听输入变更，同时遵循Angular单向数据流原则：

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

export class OngletMontantsPrevisionnelsComponent implements OnChanges, OnDestroy {
  @Input() mesures: Mesure[] = [];
  erreursMontantsPrevisionnels: string[] = [];

  ngOnChanges(changes: SimpleChanges): void {
    // 仅当mesures属性变更且存在有效值时执行校验
    const mesureChange = changes['mesures'];
    if (mesureChange && mesureChange.currentValue) {
      this.checkMontantsPrevisionnels(mesureChange.currentValue);
    }
  }

  private checkMontantsPrevisionnels(mesures: Mesure[]): void {
    this.erreursMontantsPrevisionnels = [];

    // 用reduce替代forEach，更简洁地计算累计值
    const sumMontantHTPrevisionnel = mesures.reduce((total, mesure) => {
      return total + (mesure.montantHTPrevisionnel ?? 0);
    }, 0);

    // 执行区间校验
    if (sumMontantHTPrevisionnel < 250) {
      this.erreursMontantsPrevisionnels.push('累计HT预估值不能低于250€');
    }
    if (sumMontantHTPrevisionnel > 3000) {
      this.erreursMontantsPrevisionnels.push('累计HT预估值不能超过3000€');
    }
    // 其他校验逻辑...
  }

  ajouterMesure() { 
    // 组件内部修改数据后，通过@Output通知父组件更新mesures输入
    // 例：this.mesureAjoutee.emit(nouvelleMesure);
  }

  supprimerMesure() { 
    // 同理，通过@Output通知父组件删除对应项
    // 例：this.mesureSupprimee.emit(index);
  }

  ngOnDestroy(): void {
    // 若后续引入RxJS订阅，需在此处销毁以避免内存泄漏
  }
}

如果需要处理异步逻辑或避免重复触发校验，可通过setter将输入转换为Observable：

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

export class OngletMontantsPrevisionnelsComponent implements OnInit, OnDestroy {
  @Input() set mesures(value: Mesure[]) {
    this.mesuresSubject$.next(value);
  }
  private mesuresSubject$ = new Subject<Mesure[]>();
  erreursMontantsPrevisionnels: string[] = [];
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.mesuresSubject$
      .pipe(
        // 仅当数组内容实际变更时触发校验
        distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),
        takeUntil(this.destroy$) // 组件销毁时自动取消订阅
      )
      .subscribe(mesures => {
        this.checkMontantsPrevisionnels(mesures);
      });
  }

  private checkMontantsPrevisionnels(mesures: Mesure[]): void {
    // 同之前的校验逻辑...
  }

  // ... 其余方法

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

以上方案更贴合Angular的设计规范，简化了逻辑，同时规避了原实现中的潜在问题。

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