Angular中ngOnChanges方法最后一个if语句firstChange后无法执行求助

我在ngOnChanges代码块中编写了如下代码，目前遇到的问题是：首次变更（firstChange）完成后，最后一个if语句无法执行，希望能得到解决思路。

ngOnChanges(changes: SimpleChanges) {
  debugger
  const banker = this.store.selectSnapshot(InternalUserState.getInternalUser);
  if (changes.teamBankers && changes.teamBankers.firstChange) {
    if (
      changes.allocationFromBanker &&
      changes.allocationFromBanker.firstChange
    ) {
      this.currentBanker$.subscribe( (result: InternalUser) => {
        this.currentUser = result.username;
      });
      this.teamBankers = this.teamBankers.filter(
        (x) => x.username !== this.allocationFromBanker.username
      );
    }
    this.getBankersByConversationState();
  }
  if (
    changes.allocationFromBanker &&
    !changes.allocationFromBanker.firstChange &&
    changes.allocationFromBanker.currentValue == null
  ) {
    this.teamBankers.push(changes.allocationFromBanker.previousValue);
    this.getBankersByConversationState();
  }
}

可能的原因及解决方案 #

1. 先确认触发条件是否真的满足 #

最后一个if的执行依赖三个条件：

• changes对象中存在allocationFromBanker的变更记录
• 该变更不是首次变更（!firstChange）
• 变更后的当前值为null

建议在该if块开头添加调试输出，直接验证每个条件的结果：

if (
  changes.allocationFromBanker &&
  !changes.allocationFromBanker.firstChange &&
  changes.allocationFromBanker.currentValue == null
) {
  console.log('调试信息：', {
    hasAllocationChange: !!changes.allocationFromBanker,
    isNotFirstChange: !changes.allocationFromBanker?.firstChange,
    currentValueIsNull: changes.allocationFromBanker?.currentValue === null
  });
  // 原有逻辑...
}

2. 避免直接修改输入属性 #

代码中直接修改了this.teamBankers（推测是@Input()属性），这会干扰Angular的变更检测机制，导致后续changes对象的准确性受影响。建议拆分输入属性与内部状态：

@Input() set teamBankers(val: InternalUser[]) {
  // 用内部变量存储状态，避免直接修改输入
  this._teamBankers = val ? [...val] : [];
}
private _teamBankers: InternalUser[] = [];

// 后续逻辑中都使用this._teamBankers替代原this.teamBankers

3. 修复订阅的内存泄漏问题 #

在ngOnChanges中直接订阅currentBanker$却未取消订阅，会导致内存泄漏，同时可能引发意外的状态更新。改用async管道或手动管理订阅：

private destroy$ = new Subject<void>();

ngOnInit() {
  this.currentBanker$
    .pipe(takeUntil(this.destroy$))
    .subscribe((result: InternalUser) => {
      this.currentUser = result.username;
    });
}

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

4. 检查变更触发时机 #

Angular的ngOnChanges仅在输入属性发生引用变更时触发。如果allocationFromBanker是对象/数组，若只是修改内部属性而非替换引用，changes对象不会记录该变更，自然无法进入最后一个if块。

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