Angular使用[@.disabled]禁用动画时页面冻结如何解决？

出现该问题的核心原因通常是动画禁用状态的频繁变更触发了Angular变更检测死循环，或是当前使用的Angular版本存在相关已知缺陷，可按以下步骤排查解决：

• 优先检查[@.disabled]的绑定值是否稳定：不要绑定getter方法、函数返回值这类每次变更检测都会重新计算的内容，直接绑定组件类中声明的布尔类型静态属性，仅在需要切换动画禁用状态时才修改该属性值。
  正确示例：

  // 组件类
  public disableAnimation = false;
  
  // 仅状态切换时修改
  switchAnimationState() {
    this.disableAnimation = !this.disableAnimation;
  }
  

  <!-- 模板 -->
  <div [@.disabled]="disableAnimation">
    动画相关内容
  </div>
  

• 避免将[@.disabled]绑定在带有*ngFor、*ngIf等高频切换的结构型指令的容器上，可以拆分独立外层容器绑定该属性，或者给需要禁用的单个动画触发器单独配置禁用状态，缩小触发范围。
• 若使用的是Angular 12~13的早期版本，可升级到Angular 14.1.0及以上稳定版，该版本已修复多个[@.disabled]和结构型指令结合使用时触发的动画队列溢出问题。
• 暂时无法升级版本可使用替代方案实现相同需求：
  1. 全局控制：在根模块导入BrowserAnimationsModule时通过配置项控制：

     BrowserAnimationsModule.withConfig({
       disableAnimations: true // 可替换为你的全局开关变量
     })
     

  2. 单个触发器控制：给每个动画触发器单独传禁用参数，替代全局[@.disabled]：

     <div [@fadeAnimation]="{value: animationState, params: {disabled: disableAnimation}}">
     

• 可将组件变更检测策略调整为ChangeDetectionStrategy.OnPush，减少不必要的变更检测触发次数，避免频繁重算动画禁用状态。

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