<div class="box" [ngClass]="{‘boxbg‘:flag,‘boxborder‘:tag}" (mouseover)="addClass()" (mouseout)="clearClass()" (click)="boxClick()" >
<div class="mouse" >
<span [ngClass]="{‘span‘:flag}"></span>
</div>
</div>
其中boxbg、boxborder 就是你要叫的class名称 flag、tag是一个boolean值 当这个值为true的时候，你的class名称就是这个值
ts部分
export class MainComponent implements OnInit {
flag:boolean;
tag:boolean;
constructor() {
this.flag=false;
this.tag=false;
}
ngOnInit() {
}
addClass(){
console.log(1);
this.flag = !this.flag;
}
clearClass(){
console.log(2);
this.flag = !this.flag;
}
boxClick(){
this.tag = !this.tag;
}
}
我当前这个案例就是当鼠标移动到这个div上面的时候，让它的class名称上添加一个boxbg 当鼠标移出的时候就将这个class名称去掉
当我点击这个div的时候，就往这个div上添加一个boxborder名称，反之则去掉
