Saya menggunakan Angular 4 dan saya memiliki div ini di template html saya:

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

Ini berfungsi dengan baik tetapi saya ingin melakukan hal yang sama dari file komponen .ts sebagai gantinya.

Bagaimana saya bisa melakukan ini dari file komponen .ts?

0
user8398743 20 Agustus 2017, 13:11

2 jawaban

Jawaban Terbaik

Menurut saya, Cara terbaik adalah menggunakan HostListener.

Agar komponen mendengarkan sendiri pada acara mouse, Anda dapat menggunakan:

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

}
0
rootkill 20 Agustus 2017, 10:26

Gunakan [ngClass].

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

... dan di .ts Anda:

// 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;
} 
0
Faisal 20 Agustus 2017, 10:46