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

你的掠夺者有两个问题：

您必须从BrowserAnimationsModule中的@angular/platform-browser/animations导入AppModule。
您错过了@装饰器中的HostBinding。
@HostBinding基本上允许您将一些值（可能在组件的生命周期中更改）绑定到host元素，这就是您的组件本身。因此，您必须绑定到类属性而不是方法。

以下是plunker

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

1 个答案: