Изменить класс хоста, когда mouseenter/mouseleave на дочернем элементе шаблонов с @HostBinding в Angular 2

Question

Есть ли способ использовать @HostBinding динамически, когда мы запускаем событие mouseeneter/mouseleave для дочернего элемента в шаблоне, то есть:

в template.component.html

<div class="test-btn"
   (mouseenter)="mouseenter()"
   (mouseleave)="mouseleave()">
</div>

и в template.component.ts

@HostBinding('class') classes = this.getMouseClass();

где:

private getStateClass() {
    const mouse = this.mouseState ? 'mouse-enter' : 'mouse-leave';
    return `${mouse}`;
}

mouseenter() {
    this.mouseState = true;
}

mouseleave() {
    this.mouseState = false;
}

Answer 1

Вы можете добавлять / удалять статические классы только с @HostBinding()

@HostBinding('class.myclass')
mouseState = false;

mouseenter() {
    this.mouseState = true;
}

mouseleave() {
    this.mouseState = false;
}

Если вам нужны динамические классы, вы можете ввести ElementRef и добавить / удалить класс обязательно

constructor(elRef:ElementRef) {}

private setStateClass(bool add) {
  this.elRef.nativeElement.classList.add('mouse-enter', add);
  this.elRef.nativeElement.classList.add('mouse-leave', !add);
}

mouseenter() {
    this.setStateClass(true);
}

mouseleave() {
    this.setStateClass(false);
}