0

我正在尝试从组件本身中淡出组件。我不知道这是否可能，我正在尝试使用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.

4

1 回答 1

3

你的 plunker 有几个问题：

  1. 你必须BrowserAnimationsModule在@angular/platform-browser/animations你的AppModule.
  2. 您缺少装饰器@中的。HostBinding
  3. @HostBinding基本上可以让您将一些值（可能会在组件的生命周期中更改）绑定到宿主元素，这就是您的组件本身。因此，您必须绑定到类属性而不是方法。

这是您的plunker的工作版本

于 2017-07-21T19:45:44.807 回答