Возможен ли компонент 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;
}

У меня есть пример наложения загрузки, который является отдельным компонентом. Когда служба загрузки вызывает, что загрузка завершена, я пытаюсь постепенно убрать компонент.

Пример плунжера: https://plnkr.co/edit/heNSZYNJErXnF8bxaCiz

Я не уверен, что анимации, которые я настроил, некорректны, или это невозможно сделать с помощью HostBinding,

Answer 1

Есть пара вещей, которые не так с вашим плунжером:

1. Вы должны импортировать BrowserAnimationsModule от @angular/platform-browser/animations в вашем AppModule,
2. Вы скучаете по @ в HostBinding декоратор.
3. @HostBinding в основном позволяет привязать некоторое значение (которое может измениться в жизненном цикле вашего компонента) к элементу хоста, и это сам ваш компонент. Таким образом, вы должны привязать свойство класса, а не метод.

Вот рабочая версия вашего плунжера