## 属性型指令 ``` 属性型指令会监听和修改 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"> ```