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;
}

然后不需要绑定(bind)到任何东西或在模板中指定它:

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

请注意，我使用随机属性是因为我们实际上并不关心它，因为您使用特殊状态(* 和 void)，所以您不需要不需要在这个属性中存储任何东西，并随意命名......