本文介绍如何在 Angular 中通过参数化动画（Parameterized Animations）将 @Input() 输入值动态注入动画配置，解决 @Component 装饰器中无法访问组件实例状态的限制，实现如圆环进度条动画时长可配置。
本文介绍如何在 angular 中通过参数化动画（parameterized animations）将 `@input()` 输入值动态注入动画配置，解决 `@component` 装饰器中无法访问组件实例状态的限制，实现如圆环进度条动画时长可配置。
Angular 的动画系统支持参数化动画（Parameterized Animations），允许你在模板中传入运行时参数，并在动画定义中通过 {{paramName}} 插值语法动态绑定。这正是解决“装饰器中无法访问 @Input”这一核心痛点的关键方案。
✅ 正确做法：模板传参 + 动画参数占位
首先，在组件类中定义 @Input() 属性（例如 animationDuration: string = '3s linear'），并确保该值能被模板安全使用：
@Component({
// ... 其他元数据
animations: [
trigger('animateStroke', [
state('*', style({ 'stroke-dashoffset': '*' })),
transition('* <=> *', [
style({
'transition': '{{timer}}',
'stroke-dashoffset': '*'
}),
animate('{{timer}}') // ⚠️ 注意：此处必须用双花括号！
])
])
]
})
export class SvgCircleComponent {
@Input() dashOffset: number = 0;
@Input() animationDuration: string = '3s linear'; // 默认值
}然后，在模板中显式传递参数对象（而非仅传值）：
<svg ...>
<circle
[@animateStroke]="{
value: dashOffset,
params: { timer: animationDuration }
}"
[style.stroke-dashoffset.px]="dashOffset"
/>
</svg>? 关键点解析：
- [@animateStroke] 绑定的是一个对象 { value, params }，其中 params 是参数映射表；
- 动画定义中的 {{timer}} 会自动从 params 中查找并替换；
- 若未传 params，则使用 animate(..., { params: { timer: '1s linear' } }) 中声明的默认值（见下文）。
? 补充：设置默认参数（增强健壮性）
你可以在 animate() 或 style() 的第二个参数中指定默认参数，避免模板遗漏时动画失效：
transition('* <=> *', [
style({
'transition': '{{timer}}',
'stroke-dashoffset': '*'
}, { params: { timer: '1s linear' } }), // ← 默认 fallback
animate('{{timer}}', { params: { timer: '1s linear' } })
])⚠️ 注意事项
- ❌ 不要写成 animate('timer') —— 这是字面量字符串，不会插值；
- ✅ 必须写成 animate('{{timer}}') 并配合 params 对象；
- 参数名（如 timer）需在 params 和插值表达式中严格一致（区分大小写）；
- @Input() 值变更后，Angular 会自动触发动画重播（前提是 value 表达式发生变化，如 dashOffset 更新）；
- 若使用 OnPush 策略（如本例），确保 dashOffset 变更触发变更检测（例如通过 ChangeDetectorRef.detectChanges() 或响应式流驱动）。
✅ 最终效果
现在你可以这样使用组件，完全控制动画节奏：
<!-- 2秒缓动 --> <el-circle-progress [dashOffset]="150" [animationDuration]="'2s ease-in-out'"></el-circle-progress> <!-- 500ms 瞬时跳变 --> <el-circle-progress [dashOffset]="80" [animationDuration]="'500ms step-end'"></el-circle-progress>
通过参数化动画，你无需重构整个动画逻辑，即可实现高度可配置、可复用、类型安全的动态动画体验——这是 Angular 动画 API 中被低估但极其实用的核心能力。
