如何强制Angular Animations使用最新参数值？

我有一个尺寸会动态变化的组件，销毁时需要获取当前高度用于:leave动画，该动画通过@HostBinding()绑定到组件。ngOnDestroy()在:leave动画启动前执行，本应是测量高度的合适时机，但在ngOnDestroy()中更新的动画参数（height）无法生效，尽管动画本身能正常运行（value: true生效了）。

方案1：使用NgZone强制触发变更检测 #

Angular在ngOnDestroy阶段的变更检测周期已接近尾声，直接更新@HostBinding的参数可能无法被动画系统及时捕获。通过NgZone.run()包裹参数更新逻辑，可以强制Angular执行变更检测，确保最新参数被动画系统读取：

import { Component, ElementRef, HostBinding, inject, NgZone } from '@angular/core';
import { animate, style, transition, trigger } from '@angular/animations';

@Component({
  selector: 'app-jumpy',
  templateUrl: './jumpy.component.html',
  styleUrls: ['./jumpy.component.css'],
  animations: [
    trigger('out', [
      transition(':leave', [
        style({ height: '{{height}}px', opacity: 1 }),
        animate('300ms ease-out', style({ height: '0', opacity: 0 }))
      ], { params: { height: 20 } })
    ])
  ]
})
export class JumpyComponent {
  private elementRef = inject(ElementRef);
  private ngZone = inject(NgZone);

  @HostBinding(`@out`) out = {
    value: false,
    params: { height: 20 }
  };

  ngOnDestroy(): void {
    const height = this.elementRef.nativeElement.getBoundingClientRect().height;
    this.ngZone.run(() => {
      this.out = {
        value: true,
        params: { height: height }
      };
    });
  }
}

方案2：使用setTimeout延迟参数更新 #

将参数更新逻辑放入setTimeout（0延迟），利用微任务队列让动画系统在启动前获取到最新参数：

ngOnDestroy(): void {
  const height = this.elementRef.nativeElement.getBoundingClientRect().height;
  setTimeout(() => {
    this.out = {
      value: true,
      params: { height: height }
    };
  }, 0);
}

方案3：使用AnimationBuilder手动触发动画（推荐） #

完全绕过@HostBinding的时机限制，手动创建并触发离开动画，直接传递最新的高度参数，这种方式可靠性最高：

import { Component, ElementRef, inject } from '@angular/core';
import { AnimationBuilder, animate, style } from '@angular/animations';

@Component({
  selector: 'app-jumpy',
  templateUrl: './jumpy.component.html',
  styleUrls: ['./jumpy.component.css']
})
export class JumpyComponent {
  private elementRef = inject(ElementRef);
  private animationBuilder = inject(AnimationBuilder);

  ngOnDestroy(): void {
    const height = this.elementRef.nativeElement.getBoundingClientRect().height;
    // 构建离开动画
    const animationFactory = this.animationBuilder.build([
      style({ height: `${height}px`, opacity: 1 }),
      animate('300ms ease-out', style({ height: '0', opacity: 0 }))
    ]);
    // 创建动画播放器并播放
    const player = animationFactory.create(this.elementRef.nativeElement);
    player.play();
  }
}

这种方式不需要依赖组件的动画触发器，直接控制动画的创建和执行，确保高度参数是最新的。

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