(一 )数据绑定
数据绑定,是将组件的控制器的属性绑定到模板上
1.插值表达式:<h1>{{productTile}}</h1>
使用插值表达式将一个表达式的值显示在模板上
2.属性表达式:<img [src]="imgUrl" />,也可以用插值表达式
使用【】将HTML标签的一个属性绑定到一个表达式上
3.事件绑定:<button (click)="toProductDetail()">商品详情</button>
使用()将组件控制器的一个方法绑定为模板上一个事件的处理器
4.Dom属性与html属性
<input value="Tom" (input) = "onchange($event)"/>
html属性初始化后不变,dom属性可以改变
5.HTML属性绑定
1.基本Html属性绑定:<td [attr.colspan]="tableColspan">something</td>
2.CSS类绑定:
<div class="aaa bbb" [class]="someExpression">something</div> --替换原有的class
<div [class.special]="isSpecial">something</div>
<div [ngClass]="{aaa:isA, bbb:isB}">something</div>
3.样式绑定:
<button [style.color]="isSpecial ? 'red' : 'green' ">Red</button>
<div [ngStyle]="{ 'font-style' : this.canSave ? 'italic' : 'normal' }"></div>
6.双向绑定
<input [(ngModel)]="name">