angular - 使用主机绑定(bind)设置 Angular 动画参数

Question

我一直在尝试使用 @HostBinding 设置动画参数装饰性的，但似乎不起作用，我错过了什么

animations: [
    trigger('animateMe', [
      state('void', style({ opacity: 0 })),
      transition(':enter, :leave', [ // void <=> *
        animate('{{ easeTime}}ms {{ transitionTimingFn }}')
      ])
    ])
  ]

和主机绑定(bind)

@HostBinding('@animateMe') state = {
    value: 'void',
    params: {
      easeTime: 5000
    }
  };

Answer 1

如果将 getter 函数添加到主机绑定(bind)属性，则可以设置动画参数。

trigger: any;
easingTime = 5000;

@HostBinding('@animateMe') 
get fn() {
    return {
        value: this.trigger,
        params: {
            easeTime: this.easingTime
        }
    }
};