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

[deepthan]

有如下css样式

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

1.传入一个字符串

  <p  [ngClass] = "class1 class2">

2. 传入一个对象：

 <p  [ ngClass] = "{ 'class1':true, 'class2':false, 'class3':showtitle }" >

showtitle = true ;

'class1' ： true会给p添加class1， class3的变量showtitle为true所以会给p添加class3;

3. 传入一个数组

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

还可以用三目运算符来添加

[ngClass]="[showDetail ? 'class1' : 'class2', showtitle ? 'class3' : 'class4' ]"

showDetail = true;
showtitle = false;

showDetail ? 'class1' : 'class2' 当showDetail为true是p添加'class1', 当为false时添加class2。

花式添加class

.yourClassName{
    width: 10;   
}

1. ts中直接在组件顶层dom添加class

@Component({
  selector: 'p-demo',
  host: {
    '[class.yourClassName]'  : 'true',
    '[class.yourClassName2]' : 'showDetail', // showDetail是一个变量
  }
})

2. html中添加class.

showDetail = true;

[class.yourClassName]="showDetail"