如何从component.ts创建带有参数的@ angular / animations？

Question

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

**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

@HostBinding（'@ myanimation'）state ='state1';

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

Answer 1

最后我明白了。

Componet.ts

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