角度Iは角4を使用しています

Question

を提出し、私はこれが私のHTMLテンプレートにDIV持っている.TSからmouseOveredにクラスを追加/削除：

<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; 
}