动态添加 class ：ngClass用法

[deepthan]

ngClass用法，用于不通过情况更改不同的class

1. 绑定一个字符串，就像绑定一个class一样

html

  <p  [ngClass] = " class1 class2 " class = " class3 " >

css

.class1 {  color : red }
.class2 {  width : 10px }
.class3 {  height : 10px }

2. 绑定一个数组

html

 <p  [ ngClass] = [" class1", "class2 "]  class = " class3 " >

css

.class1 {  color : red }
.class2 {  width : 10px }
.class3 {  height : 10px }

3. 绑定一个对象：

html

 <div (click)=changeP()''>更改p的样式</div>
 <p  [ ngClass] = "{ 'class1' ： true ,  'class2' : false , 'class3' :showThree }" >

css

.class1 {  color : red }
.class2 {  width : 10px }
.class3 {  height : 10px }

ts

public showThree :boolean = true ;

class1为 true所以样式是显示的， class2 为false 所以样式是没有的， class3 在ts里面赋值为 true 所以也是显示的。

4. 根据布尔值选择添加哪个class

ts

  private showDet : boolean = false;
  clickTit(){
    this.showDet = !this.showDet;
  }

html

[ngClass]="showDet ? 'show-det' : 'hide-det'"
//多个class
[ngClass]="[showDet ? 'show-det' : 'hide-det', showtit ? 'show-tit' : 'hide-tit' ]"