Angular 角度2/4使用主机绑定为主机组件设置动画，是否可能？

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

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示例：

---

我不确定我设置的动画是否不正确，或者使用

HostBinding

无法实现这一点。您的plunker有两个问题：

您必须从

应用模块中的
@angular/platform browser/animations
导入
浏览器动画模块

您缺少

主机绑定

装饰程序中的

@

@HostBinding

基本上允许您将一些值（可能在组件的生命周期中发生变化）绑定到宿主元素，这就是组件本身。因此，必须绑定到类属性而不是方法

---

这是您的

的工作版本。您的plunker有两个问题：

您必须从

应用模块中的
@angular/platform browser/animations
导入
浏览器动画模块

您缺少

主机绑定

装饰程序中的

@

@HostBinding

基本上允许您将一些值（可能在组件的生命周期中发生变化）绑定到宿主元素，这就是组件本身。因此，必须绑定到类属性而不是方法

---

这是您的

的工作版本，谢谢您的回复！我想我在plunker中写代码时有点匆忙。正如您指出的，我在代码中的错误是，我试图绑定到方法而不是属性。谢谢你的帮助：）谢谢你的回复！我想我在plunker中写代码时有点匆忙。正如您指出的，我在代码中的错误是，我试图绑定到方法而不是属性。谢谢你的帮助：）