Angular Animations：如何在模板中动态绑定动画触发器名称？答案

【问题标题】：Angular Animations : How to bind animation trigger name dynamically in the template?Angular Animations：如何在模板中动态绑定动画触发器名称？
【发布时间】：2017-12-30 13:33:56
【问题描述】：

我想知道是否有办法在模板中动态绑定动画触发器名称。

这是模板 app.component.html 中要设置动画的 div：

<div [@animationTriggerName]>
  ...
</div>

这里是 app.module.ts：

...
@NgModule({
  imports:      [...],
  declarations: [ ..., AnimationTriggerNameDirective ],
  bootstrap:    [...]
})

这里是 app.component.ts：

@Component({
  ...
})
export class AppComponent  {
  ...
  animationTriggerName = 'slideInOut';
}

@Directive({
  selector: '[animationTriggerName]'
})
export class AnimationTriggerNameDirective {
  @Input() animationTriggerName: string;
  constructor() {}
}

我希望能够动态设置变量 animationTriggerName。因此，如果我将其设置为 myTriggerName，那么在模板中我会呈现这个：

<div [@myTriggerName]>
  ...
</div>

因此触发器名称为 myTriggerName 的动画将能够运行。

【问题讨论】：

标签： angular angular-directive angular-animations

【解决方案1】：

我有类似的问题，如发布的问题，到目前为止，我使用 ngSwitch 和 ngSwitchCase 作为解决方法，因为在一些尝试和错误之后我无法进行变量绑定。我不认为下面的示例是最佳解决方案，因为如果我想将触发器名称切换为百将很乏味，但是它现在对我有用，在运行时更改触发器名称，希望还有其他更好的想法，希望对你有帮助

<div [ngSwitch]="child.animationName" >
 <input *ngSwitchCase="flyInOut" [@flyInOut]="'in'"  ...>
 <input *ngSwitchCase="fadeIn" [@fadeIn]="'in'"  ...> 
 <input *ngSwitchDefault [@flyRotateInOut]="'in'" ...>
</div>

【讨论】：

这是一个非常好的解决方法，但对于大
来说，为了更改动画名称而复制代码可能会成为问题。我会等待接受答案，看看是否有其他想法
嗨，我从下面的网址了解到，使用多个“状态”应该会好得多，而不是使用多个触发器名称使代码更复杂angularfirebase.com/lessons/…

【解决方案2】：

在我从这篇文章中学习之后。看起来使用多个状态比使用触发器名称要容易得多，所以我改变了我的代码结构，如下所示，下面是原始帖子供您参考https://angularfirebase.com/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/

@Component({
  selector: 'hammer-card',
  templateUrl: './hammer-card.component.html',
  styleUrls: ['./hammer-card.component.sass'],
  animations: [
    trigger('cardAnimator', [
      transition('* => wobble', animate(1000, keyframes(kf.wobble))),
      transition('* => swing', animate(1000, keyframes(kf.swing))),
      transition('* => jello', animate(1000, keyframes(kf.jello))),
      transition('* => zoomOutRight', animate(1000, keyframes(kf.zoomOutRight))),
      transition('* => slideOutLeft', animate(1000, keyframes(kf.slideOutLeft))),
      transition('* => rotateOutUpRight', animate(1000, keyframes(kf.rotateOutUpRight))),
      transition('* => flipOutY', animate(1000, keyframes(kf.flipOutY))),
    ])
  ]
})

【讨论】：

我发现这种方法也最适合我~而不是将多个触发器放在一个组件中，将它们全部放在一个父触发器下，然后按状态拆分。谢谢！