如何使用component.ts中的参数创建@angular/动画？

我知道如何添加带有HTML参数的agular动画，如下所示：

**Animations.ts** 

trigger('slowXMove', [ state('posX1State', style({ left: '{{posX1}}px' }), {params: {posX1: '0px'}}), state('posX2State', style({ left: '{{posX1}}px' }), {params: {posX1: '0px'}}), transition('posX1State => posX2State', animate('2s')), transition('posX2State => posX1State', animate('2s')) ])

 trigger('slowXMove', [
    state('posX1State', style({
        left: '{{posX1}}px'
    }), {params: {posX1: '0px'}}),
    state('posX2State', style({
        left: '{{posX1}}px'
    }), {params: {posX1: '0px'}}),
    transition('posX1State => posX2State', animate('2s')),
    transition('posX2State => posX1State', animate('2s'))
])

HTML

@主机绑定（'@myanimation'）状态='state1'

但是，如何从component.ts向动画中添加参数？

最终我得到了它

Componet.ts

 @HostBinding('@myanimation') myanimation;
       this.myanimation= {
        value: 'state1',
         params: {
          duration: '1s ease-in', transform: '0px'
         }
       };

---

我想我明白了。@HostBinding（'@myanimation'）myanimation；this.myanimation={value:'state1'，params:{duration:'1s ease in'，transform:'0px'}；