Возможен ли компонент 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;
}
У меня есть пример наложения загрузки, который является отдельным компонентом. Когда служба загрузки вызывает, что загрузка завершена, я пытаюсь постепенно убрать компонент.
Пример плунжера: https://plnkr.co/edit/heNSZYNJErXnF8bxaCiz
Я не уверен, что анимации, которые я настроил, некорректны, или это невозможно сделать с помощью HostBinding
,
1 ответ
Решение
Есть пара вещей, которые не так с вашим плунжером:
- Вы должны импортировать
BrowserAnimationsModule
от@angular/platform-browser/animations
в вашемAppModule
, - Вы скучаете по
@
вHostBinding
декоратор. @HostBinding
в основном позволяет привязать некоторое значение (которое может измениться в жизненном цикле вашего компонента) к элементу хоста, и это сам ваш компонент. Таким образом, вы должны привязать свойство класса, а не метод.
Вот рабочая версия вашего плунжера