使用主机绑定设置 Angular 动画参数答案

【问题标题】：Set Angular animation param with Host Binding使用主机绑定设置 Angular 动画参数
【发布时间】：2018-09-18 10:22:06
【问题描述】：

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

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

和主机绑定

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

【问题讨论】：

标签： angular angular-animations angular2-hostbinding

【解决方案1】：

不幸的是，这不起作用，因为动画是在组件实际生成之前创建的（此代码在 @Component 元数据中）。

类外的任何代码都不会在同一范围内。

另外，我不确定，但我没想到您可以使用@HostBinding 绑定到动画，相反，您可以像这样使用动画回调：

  <ul>
    <li *ngFor="let hero of heroes"
        (@flyInOut.start)="animationStarted($event)"
        (@flyInOut.done)="animationDone($event)"
        [@flyInOut]="'in'">
      {{hero.name}}
    </li>
  </ul>

参考：https://angular.io/guide/animations#animation-callbacks

【讨论】：

【解决方案2】：

如果您向主机绑定属性添加 getter 函数，您可以设置动画参数。

trigger: any;
easingTime = 5000;

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

【讨论】：

这很有效就像一个魅力，应该被标记为正确答案。

【解决方案3】：

宿主元素中的动画应该这样处理：

animations: [
    trigger('toggleDrawer', [
        state('closed', style({
            transform: 'translateX(0)'
        })),
        state('opened', style({
            transform: 'translateX(80vw)'
        })),
        transition('closed <=> opened', animate(300))
    ])
]

和HostBinding / HostListener

private state: 'opened' | 'closed' = 'closed';

// binds the animation to the host component
@HostBinding('@toggleDrawer') get getToggleDrawer(): string {
    return this.state === 'closed' ? 'opened' : 'closed';
}

@HostListener('@toggleDrawer.start', ['$event']) startDrawerHandler(event: any): void {
    console.log(event);
}

@HostListener('@toggleDrawer.done', ['$event']) doneDrawerHandler(event: any): void {
    console.log(event);
}

请记住，HostListener 将在加载时执行来自状态 void (fromState: "void") 的事件，我不知道这是否可以从动画声明中阻止，或者您是否只需要制作一个如果您想防止某些事情发生，则在 HostListeners 中设置条件。

【讨论】：