## 屬性型指令 ``` 屬性型指令會監聽和修改 HTML 元素或組件的行為、元素屬性（Attribute）、DOM 屬性（Property） ``` > 通常屬性型指令使用”\[ \]”方括號 ## 內置屬性型指令 ## 一、NgClass >[info] CSS類綁定，動態添加或移除CSS類 1.使用變量 ``` // 如果current變量為true 將會添加current類,否則移除 <div [class.current] = "current">current</div> ``` 2.使用表達式 ``` //使用簡單的表達式,表達式為true則添加selected類,否則移除 <div [class.selected]="hero == selectedHero" ></div> ``` 3.使用三元運算符 ``` // 使用三元運算符currentClasses變量為true添加present類,否則添加before類 <div [ngClass]="currentClasses?'present':'before'">currentClasses</div> ``` 4.使用對象 ``` // 使用對象 對象中的每個 key 都是一個 CSS 類名，如果它的 value 是 true，這個類就會被加上，否則就會被移除。 <div [ngClass]="cssObj">cssObj</div> cssObj: object = { 'saveable': true, //如果值為true則會添加上這個類 'modified': true, 'special': false //如果值為fasle則會移除這個類 }; ``` ## 二、NgStyle >[info] CSS樣式綁定，動態添加或移除CSS樣式 1.使用三元運算符 ``` // 如果isSpecial變量為true 將會添加“#fff”顏色值,否則添加“#03a9f4”值。 <div [style.color]="isSpecial?'#fff':'#03a9f4'">顏色</div> ``` 2.使用變量,帶單位 ``` //帶單位的樣式綁定 <div [style.padding.px]="isSpecial">顏色</div> isSpecial: number = 15; ``` 3.使用對象 ``` // 使用對象的形式 <div [ngStyle]="expression">樣式對象</div> expression: object = { 'font-style': 'italic', 'font-weight': 'bold', 'font-size': '24px' } ``` ## 三、NgModel >[info] 雙向綁定到 HTML 表單元素,使用需引入 FormsModel模塊,并且在跟模塊中的imports中聲明。 1.初始形式： ``` <input type="text" value="{{value1}}" (input)="value1=$event.target.value"> ``` 2.Anglaur優化形式（雙向數據綁定的展開形式） ``` <input [ngModel]="value2" (ngModelChange)="value2=$event"> ``` 3.最終形式 ``` <input type="text" [(ngModel)]="value3"> ```