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條同樣適用。