在Angular 2中使用@HostBinding的templates子元素上的mouseenter/mouseleave时更改host类

import { Component, HostBinding, HostListener } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div class="templates" (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
      <!-- templates子元素 -->
    </div>
  `,
  styles: [`
    .host-class {
      /* host类的样式 */
    }
  `]
})
export class ExampleComponent {
  @HostBinding('class.host-class') isHovered = false;

  onMouseEnter() {
    this.isHovered = true;
  }

  onMouseLeave() {
    this.isHovered = false;
  }
}