角度添加/删除类在鼠标上从 .ts 文件覆盖

Question

我正在使用 Angular 4，我的 html 模板上有这个div：

<div [class.myCssClass]="mouseOvered" (mouseout)="mouseOvered=false" (mouseover)="mouseOvered=true">Hover me</div>

这很好用，但我想从 .ts 组件文件中做同样的事情。

如何从 .ts 组件文件执行此操作？

Answer 1

据我说，最好的方法是使用HostListener。

要使组件在鼠标事件上侦听自身，您可以使用：

@Component({
selector: 'my-component'
template: '<div [class.myCssClass]="mouseover"'
})
class MyComponent {

mouseover:boolean;
@HostListener('mouseover')
onMouseOver() {
this.mouseover = true;
}
@HostListener('mouseout')
onMouseOut() {
this.mouseover = false;
}
}

Answer 2

使用[ngClass].

<div [ngClass]="{  overedClass:  mouseOvered === true }" 
(mouseout)="onMouseOut()"
(mouseover)="onMouseOver()">Hover me</div>

。在您的 .ts 中：

// contains name of any class that you want to apply
private overedClass: string = 'myCssClass';
private mouseOvered: boolean;
onMouseOver() {
this.mouseOvered  = true;
} 
onMouseOut() {
this.mouseOvered  = false;
}