如何在Angular初始化完成后触发首次动画？

当前在ngAfterViewInit中设置dashOffset无法触发首次动画，原因是此时组件初始变更检测周期已完成，属性变化未被Angular动画系统捕捉到。以下是可行的解决方案：

方案1：移至ngOnInit初始化 #

将首次dashOffset的赋值逻辑放到ngOnInit钩子中。此时组件输入属性已初始化，且变更检测尚未结束，属性变化会被动画系统正常识别：

ngOnInit() {
  if (this.firstAnimation) {
    this.dashOffset = this.calculateDashOffset(this.percentageState);
    this.firstAnimation = false;
    console.log(`The dash offset is ${this.dashOffset}`);
  }
}

方案2：在ngAfterViewInit中手动触发变更检测 #

如果必须保留在ngAfterViewInit中设置，可注入ChangeDetectorRef手动触发变更检测，强制动画系统感知到属性变化：

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

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  if (this.firstAnimation) {
    this.dashOffset = this.calculateDashOffset(this.percentageState);
    this.firstAnimation = false;
    this.cdr.detectChanges(); // 手动触发变更检测
    console.log(`The dash offset is ${this.dashOffset}`);
  }
}

关键原理 #

Angular动画的触发依赖属性值变更被变更检测系统捕获，因此需确保属性赋值发生在变更检测周期内，或通过手动调用detectChanges()补全检测流程。

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