Angular2如何在组件外使用动画

Question

我已经快速创建了一个简单的组件。

@Component({
  selector: 'saved-overlay',
  templateUrl: './saved-overlay.html',
  exportAs: 'saved-overlay',
  animations: [
    trigger('inOut', [
      transition('void => *', [
        animate("300ms ease-out", keyframes([
          style({opacity: 0}),
          style({opacity: 1})
        ]))
      ]),
      transition('* => void', [
        animate("300ms ease-out", keyframes([
          style({opacity: 1}),
          style({opacity: 0})
        ]))
      ])
    ])
  ]
})
export class SavedOverlayComponent {
}

我在模板中这样调用它：

<saved-overlay #myOverlay='saved-overlay'></saved-overlay>

有没有办法从我的组件外部调用inOut动画（即在我引用此组件的模板中）。 理想情况下，我希望在组件本身上使用此动画：

<saved-overlay #myOverlay='saved-overlay' [@inOut]></saved-overlay>

然而，它会触发一个错误，说我的inOut动画未定义。

- Scipion

Answer 1

您可以使用@HostBinding来实现这个功能：

@Component({
  selector: 'saved-overlay',
  templateUrl: './saved-overlay.html',
  exportAs: 'saved-overlay',
  animations: [
    trigger('inOut', [
      transition('void => *', [
        animate("300ms ease-out", keyframes([
          style({opacity: 0}),
          style({opacity: 1})
        ]))
      ]),
      transition('* => void', [
        animate("300ms ease-out", keyframes([
          style({opacity: 1}),
          style({opacity: 0})
        ]))
      ])
    ])
  ]
})
export class SavedOverlayComponent {
  @HostBinding("@InOut")
  foo:any;
}

那么就不需要绑定任何东西或在模板中指定它：

<saved-overlay #myOverlay='saved-overlay'></saved-overlay>

请注意，我使用随机属性，因为我们实际上不关心它，由于您使用了特殊状态（ * 和 void ），所以您不需要在此属性中存储任何内容，并且可以根据需要命名...

- n00dl3