| 1.介绍 |
//使用插值表达式将一个表达式的值显示在模板上
<h1>{{productTitle}}</h1>
//使用方括号将HTML标签的一个树形绑定到一个表达式上
<img[src]="imgUrl">
//使用小括号将组建控制器的一个方法绑定为模板上一个事件的处理器
<button(click)="toProductDetail()">商品详情</button>- 事件绑定
| 2.属性绑定 |
- 属性绑定=插值表达式
- angular属性绑定是Dom属性绑定
<!--模板代码：-->
<img [src]="imgUrl">
<!--ts代码-->
imgUrl:string="http://placehold.it/400*220"- 打印出来的是DOM属性
打印出来的是HTML的属性，html属性的值不能改变，dom属性可以改变
3.HTML属性和DOM属性的关系 少量HTML属性和DOM属性之间有着1：1的映射，如id.
- 有些HTML属性没有对应的DOM属性，如colspan
- 有些DOM属性没有对应的HTML属性，如textcontent
- 就算名字相同，HTML属性和DOM属性也不是同一样东西
- HTML属性的值指定了初始值：DOM属性的值表示当前值。DOM属性的值可以改变；HTML属性的值不能改变。
模板绑定是通过DOM属性和事件来工作的，而不是HTML属性。
DOM属性的绑定：
- 假设新建一个组件，组件控制器有一个greeting属性
- 模板上value属性通过[]与组件greeting属性绑定起来
- 当控制器的greeting属性发生变化的时候，将触发angular的DOM属性绑定机制，修改input的DOM属性
//伟大的解释
1.当greeting值改变的时候，angular会使用单项绑定机制来更新DOM，单项指的是从控制器的greeting属性到DOM的value属性，将dom的value属性的值改成greeting属性的值
2.angular的dom属性的绑定不会更新HTML的属性，HTML里value的属性的值一直为空
3.浏览器会保持DOM和UI同步，angular在更新了DOM的value属性后，新的value的值被渲染到页面上，这时input的框里就会出现A value字符串
4.DOM相关属性的改变不会更新Input标签的值
5.当用户在input标签输入东西时，浏览器也不会同步UI和HTML属性，用户看到的新值来自于DOM不是HTMl
HTML属性绑定：
//css类绑定：
<div class="aaa bbb"[class]="someExpression"></div>
<div[class.special]="isSpecial">something</div>
<div[ngClass]="{{aaa:isS,bbb:isB}}">
//样式绑定
<button[style.color]="isSpecial?'red':'green'">Red</button>
<div[ngStyle]="{'font-style':this.canSave?'italic':'normal'}">
| 4.小结 |
常用的还是要理解深入一点，然后在不断证明，不断更新。