添加BrowserAnimationsModule后Angular UI未同步数据模型变更问题

我的项目包含一个程序选择页面，未引入BrowserAnimationsModule时运行完全正常。页面中的“切换至Program A”按钮原本可多次正常点击，但添加该模块后，第二次点击会显示“Empty Program”——数据模型已设置为正确程序（已在页面打印验证）。

复现细节 #

• 两个页面代码完全一致，仅故障版本的项目引入了BrowserAnimationsModule
• 已在Firefox、Edge浏览器，Angular 12、15版本中复现问题
• 尝试过FormControl和[(ngModel)]两种实现方式，问题均存在
• 曾找到相关Bug记录，但显示已修复

排查与解决方向 #

1. 手动触发变更检测
   BrowserAnimationsModule会改变Angular变更检测的时机，可能导致视图更新滞后于数据模型变更。可以在设置程序后手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

switchToProgramA() {
  this.currentProgram = programA;
  this.cdr.detectChanges(); // 强制触发视图更新
}

2. 排查自定义动画的影响
   检查程序选择区域是否绑定了自定义动画，动画执行过程中可能意外重置了视图绑定的变量。临时注释所有自定义动画，验证问题是否消失。

3. 升级Angular补丁版本
   尽管相关Bug显示已修复，但不同小版本可能存在遗漏。尝试升级到对应大版本的最新补丁（如Angular 15.x的最新版本），确认问题是否被修复。

4. 用NgZone包裹状态变更逻辑
   动画可能运行在Angular的NgZone外，导致变更检测未触发。可以将设置程序的逻辑包裹在NgZone.run()中：

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

switchToProgramA() {
  this.ngZone.run(() => {
    this.currentProgram = programA;
  });
}

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