【Angular6+】屬性及樣式綁定

Angular6_屬性及樣式綁定

Angular 通過 [] 來綁定數值、變量或者表達式，這種綁定是單向數據綁定。

屬性綁定

屬性綁定分爲兩種

• Property
  元素的常規屬性，比如 src、disabled 等

  <img [src]="heroImageUrl" />
  <button [disabled]="isUnchanged">Cancel is disabled</button>
  <div [ngClass]="classes">[ngClass] binding to the classes property</div>
  <app-hero-detail [hero]="currentHero"></app-hero-detail>

• Attribute

  元素的非常規屬性，比如 colspan 等

  <tr>
    <td [attr.colspan]="1 + 1">One-Two</td>
  </tr>

CSS 類綁定

藉助 CSS 類綁定，可以從元素的 class attribute 上添加和移除 CSS 類名。

<!-- 這是一個或者全有或者全無的替換型綁定。
即當 badCurly 有值時 class 這個 attribute 設置的內容會被完全覆蓋 -->
<div class="bad curly special" [class]="badCurly">Bad curly</div>
<!-- toggle the "special" class on/off with a property -->
<div [class.special]="isSpecial">The class binding is special</div>

樣式綁定

樣式綁定的語法與屬性綁定類似。 但方括號中的部分不是元素的屬性名，而由 style 前綴，一個點 (.)和 CSS 樣式的屬性名組成。 形如：[style.style-property]。

<button [style.color]="isSpecial ? 'red': 'green'">Red</button>
<button [style.background-color]="canSave ? 'cyan': 'grey'">Save</button>
<button [style.font-size.em]="isSpecial ? 3 : 1">Big</button>
<button [style.font-size.%]="!isSpecial ? 150 : 50">Small</button>