Angular2 ngclass与ngstyle的使用

今日遇到ngClass与ngStyle的使用问题。

ngClass与ngStyle都是动态修改html样式的内置命令。

ngClass

官方文档的说明的格式：

https://www.angular.cn/api/common/NgClass

<some-element [ngClass]="'first second'">...</some-element>
<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>
<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>
<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

总结：

1.[ngClass]="'css类1 css类2'"
字符串以空格分割形式。
2.[ngClass]="['css类1','css类2']"
数组形式。
3.[ngClass]="{'css类1':true, 'css类2':true}"
 key/value形式
4.[ngClass]="{'css类1 css类2':true}"
多类key/value形式
5.[ngClass]="stringExp|arrayExp|objExp"
表达式形式。

还有一种方式就是在组件中定一个对象 ：

 

currentClasses: {};
setCurrentClasses() {
  // CSS classes: added/removed per current state of component properties
  this.currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
  };
}

把ngClass属性绑定到currentClasses，根据它来设置此元素的CSS类：

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

 

持续更新：

ngStyle

贴上官方文档：https://www.angular.cn/api/common/NgStyle

<div [ngStyle]="{'background-color':'green'}"></<div>
<div [ngStyle]="{'background-color':  disabled == true  ?  'green' : 'red' }"></<div>
<div [ngStyle]="{'background-color':'green' , 'color':'red' }"></<div>

总结：

1.[ngStyle]="{'css属性':'属性值'}"
 单个key/value形式
2.[ngStyle]="{'css属性1':条件表达式 ？ 'true时 属性值1':'false 时 属性值2'}"
 单个属性值设置，使用三元表达式进行选择
3.[ngStyle]="{'css属性1':'属性值1', 'css属性2':'属性值2'}"
 多个key/value形式

注意：
1.如果在原生html标签中使用[style]={'属性1':'值1',......},会强制覆盖原本标签中style的样式
2.ngStyle的优先级低于【style.属性值】的写法
3.在递归中使用对象属性类型绑定到原生标签的style时，注意事项中1,2条同样适用。