Angular动画传参触发NG03000等错误问题求助

问题说明 #

我正在创建支持参数传入的Angular动画组件，已通过@Input定义并初始化了动画时长、缓动函数等参数，在ngOnInit中打印参数能看到有效值，但触发动画时却收到NG03003（要求提供openTransitionDuration等参数）、NG03000（时间值无效）等错误，未找到该传参方式的文档，求助问题原因及解决方法。

现有代码 #

动画定义代码 #

animations: [
trigger('openClose', [
  state(
    'open',
    style({
      opacity: 1,
      transform: 'scale(1)',
    })
  ),
  state(
    'closed',
    style({
      opacity: 0,
      transform: 'scale(0.8)',
    })
  ),
  transition('closed => open', [
    animate('{{ openTransitionDuration }} {{ openTransitionTimingFunction }}', style({ transform: 'scale(1)', opacity: 1 }))
  ]),
  transition('open => closed', [
    animate('{{ closeTransitionDuration }} {{ closeTransitionTimingFunction }}', style({ transform: 'scale(0.8)', opacity: 0 }))
  ]),
]),
trigger('prevNext', [
  state(
    'true',
    style({
      opacity: 1,
    })
  ),
  state(
    'false',
    style({
      opacity: 0,
    })
  ),
  transition('false => true', [
    animate('{{ leftTransitionDuration }} {{ leftTransitionTimingFunction }}', style({}))
  ]),
  transition('false => true', [
    animate('{{ rightTransitionDuration }} {{ rightTransitionTimingFunction }}', style({}))
  ]),
]),
trigger('imageAnimation', [
  transition('* => *', [
    style({ opacity: 0, transform: 'scale(0.8)' }),
    animate(
      '{{ openTransitionDuration }} {{ openTransitionTimingFunction }}',
      style({ opacity: 1, transform: 'scale(1)' })
    )
  ]),
]),

组件Input参数定义 #

@Input() openTransitionDuration: string = '4s';
@Input() openTransitionTimingFunction: string = 'ease-in';
@Input() openTransitionName: string = 'animate__fadeIn';

@Input() closeTransitionDuration: string = '4s';
@Input() closeTransitionTimingFunction: string = 'ease-out';
@Input() closeTransitionName: string = 'animate__fadeOut';

@Input() leftTransitionDuration: string = '4s';
@Input() leftTransitionTimingFunction: string = 'ease-in';
@Input() leftTransitionName: string = 'animate__fadeOutLeft';

@Input() rightTransitionDuration: string = '4s';
@Input() rightTransitionTimingFunction: string = 'ease-in';
@Input() rightTransitionName: string = 'animate__fadeOutRight';

报错信息 #

ERROR Error: NG03402: Unable to process animations due to the following failed trigger transitions
NG03505: @imageAnimation has failed due to:
NG03003: Please provide a value for the animation param openTransitionDuration

• NG03003: Please provide a value for the animation param openTransitionTimingFunction
• NG03000: The provided timing value "" is invalid.

问题原因及解决方法 #

核心原因 #

Angular动画模板中的插值语法{{ }}对应的参数不会自动绑定组件的@Input属性，必须在触发动画时通过params显式传入参数对象，否则动画无法获取到参数值，导致报错。另外，prevNext触发器中存在重复的transition('false => true')定义，会导致逻辑冲突，也是潜在问题。

具体解决步骤 #

1. 在模板中显式传入动画参数
   使用动画触发器时，需要通过params字段把组件的@Input参数传递给动画。示例如下：

<!-- openClose触发器 -->
<div [@openClose]="{ value: isOpen, params: { 
    openTransitionDuration: openTransitionDuration, 
    openTransitionTimingFunction: openTransitionTimingFunction,
    closeTransitionDuration: closeTransitionDuration,
    closeTransitionTimingFunction: closeTransitionTimingFunction
  } }">
  <!-- 内容 -->
</div>

<!-- imageAnimation触发器 -->
<div [@imageAnimation]="{ value: currentImage, params: { 
    openTransitionDuration: openTransitionDuration, 
    openTransitionTimingFunction: openTransitionTimingFunction
  } }">
  <!-- 图片内容 -->
</div>

<!-- prevNext触发器（先修正重复transition问题） -->
<div [@prevNext]="{ value: isPrevVisible, params: { 
    leftTransitionDuration: leftTransitionDuration, 
    leftTransitionTimingFunction: leftTransitionTimingFunction
  } }">
  <!-- 左按钮内容 -->
</div>
<div [@prevNext]="{ value: isNextVisible, params: { 
    rightTransitionDuration: rightTransitionDuration, 
    rightTransitionTimingFunction: rightTransitionTimingFunction
  } }">
  <!-- 右按钮内容 -->
</div>

2. 修正prevNext触发器的重复transition问题
   原代码中两个transition('false => true')会导致动画逻辑混乱，需要区分不同的状态切换，比如改为：

trigger('prevNext', [
  state('true', style({ opacity: 1 })),
  state('false', style({ opacity: 0 })),
  // 左按钮显示动画
  transition('false => true', [
    animate('{{ leftTransitionDuration }} {{ leftTransitionTimingFunction }}')
  ]),
  // 右按钮显示动画（改为独立状态切换）
  transition('void => true', [
    animate('{{ rightTransitionDuration }} {{ rightTransitionTimingFunction }}')
  ]),
]),

或者直接拆分prevNext为prevAnimation和nextAnimation两个独立触发器，避免参数混淆。

3. 确保参数更新时动画能响应
   如果父组件动态修改@Input参数，需要确保动画能获取到最新值。可以通过ngOnChanges监听参数变化，或者使用setter更新动画状态：

_isOpen = false;
@Input() set isOpen(value: boolean) {
  this._isOpen = value;
  // 手动触发变更检测，确保动画更新
  this.cd.markForCheck();
}
get isOpen() {
  return this._isOpen;
}

// 注入变更检测服务
constructor(private cd: ChangeDetectorRef) {}

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