Angular 2/4 使用主机绑定动画化主机组件，这可能吗？

Question

我正在尝试从组件本身淡出一个组件。我不知道这是否可能，我正在尝试使用 HostBinding.

来实现

动画：

animations: [
    trigger('fade', [
        state('fadeIn', style({ opacity: 1 })),
        state('fadeOut', style({ opacity: 0, visibility: 'hidden' })),
        transition('* <=> *', [
            animate(250)
        ])
    ])
]

主机绑定：

HostBinding('@fade') animateComponent(state: string) {
    return state;
}

我的示例是一个加载叠加层，它是一个单独的组件。当加载服务触发加载完成时，我正在尝试淡出组件。

Plunker 示例： https://plnkr.co/edit/heNSZYNJErXnF8bxaCiz

我不确定我设置的动画是否不正确，否则使用 HostBinding 无法实现。

Answer 1

你的 plunker 有一些问题：

您必须在 AppModule 中从 @angular/platform-browser/animations 导入 BrowserAnimationsModule。
您在 HostBinding 装饰器中缺少 @。
@HostBinding 基本上可以让您将一些值（可能会在您的组件的生命周期中发生变化）绑定到宿主元素，这就是您的组件本身。所以你必须绑定到 class 属性而不是方法。

这是您的 plunker

的工作版本

Angular 2/4 使用主机绑定动画化主机组件，这可能吗？

Angular 2/4 Animating Host Component using Host Bindings, is it possible?

angular

angular-animations