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名稱，反之則去掉