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动画未定义。

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 ），因此您不需要在此属性中存储任何内容，并根据您的喜好命名它。 。