带参数的 Angular 15 可重用动画

Question

我在 .ts 文件中有这个动画

export const fadeIn = trigger('fadeIn', [
  transition(
    ':enter',
    [
      style({opacity: 0}),
      animate(
        '{{ duration }} {{ delay }} ease-in',
        style({opacity: 1})
      )
    ],
    {params: {duration: "1s", delay: "0s"}}
  )
]);

然后我像这样在我的组件 HTML 中使用它

<img src="../myImg.png" [@fadeIn]="{ value: '', params: { duration: '2s', delay: '3s' } }">

效果很好。但问题是：为什么我在动画中不使用它，为什么需要发送value=''？

我想这样用（没有价值）

<img src="../myImg.png" [@fadeIn]="{ params: { duration: '2s', delay: '3s' } }">

或者更好的是只发送有用的参数

<img src="../myImg.png" [@fadeIn]="{ duration: '2s', delay: '3s' }">

两个选项都忽略参数，动画以默认的duration(1s)和delay(0s)

运行