Angular directive 之 ngClass、ngStyle | 更文挑战第7天

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

ngClass 用法，不同情况添加不同的 class

有如下css样式

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

1.直接传入一个 class 字符串

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

渲染为

<p class="class1 class2"></p>

2. 传入一个对象，对象的 value 若是 true 则添加此 class ，false 则不添加

html

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

ts

show = true ;

渲染为

<p class="class1 class3"></p>

• 'class1' ： true会给 p 添加class1
• 'class2' ： false不会给 p 添加class2
• 'class3': show 因为 show变量为true所以会给 p 添加class3

3. 传入一个数组

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

数组每项可以用三目运算符来添加

html

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

ts

showDetail = true;
showtitle = false;

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

4. 其他花式添加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"

ngStyle

1. 添加变量到ngStyle中

pWidth = '100'

<p [ngStyle]="{'width.px': pWidth}"></p>

2. 根据变量添加不同属性

showP = false

<p [ngStyle]="{'display': showP ? 'block': 'none'}"></p>

3. 其他花式添加style

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

@Component({
  selector       : 'p-sample',
  host       : {
    '[style.color]' : `'red'`
  }
})

2. html中添加style

<p [style.color]="'red'"></p>

更多用法更新于 github