并在template.component.ts中@HostBinding('class') classes = this" />

在Angular 2中使用@HostBinding对模板子元素进行mouseenter / mouseleave时更改主机类

angular angular2-directives angular2-hostbinding

411 观看

1回复

当我们在模板的子元素上触发mouseeneter / mouseleave事件时，是否有一种动态使用@HostBinding的方法，即：

在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;
}
作者: anna olchowik 的来源 发布者: 2019 年 10 月 9 日

回应 (1)

0像

您只能使用以下方法添加/删除静态类 @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);
}
作者: Günter Zöchbauer 发布者: 27.02.2017 01:49
32x32