如何使用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';

但是，如何从components.ts向我的动画添加参数？

Answer 1

终于我明白了。

Componet.ts

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