angular的ngClass

angular中的 ngClass

例：

html 页面

<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名称，反之则去掉