Angular4的dom事件

Angular4的dom事件

• 差值表达式和属性绑定其实是一样的（例）

<!-- 这两个是一样的效果，使用哪个都可以 -->
<img src="{{imgUrl}}">
<img [src]="imgUrl">

• dom属性和html属性不一样

<input value="请输入姓名" (input)="change($event)">

change(event) {
  // dom属性
  console.log(event.target.value);
  // html属性
  console.log(event.target.getAttribute('value'));
}


// 打印结果
consult.component.ts:24 请输入姓
consult.component.ts:25 请输入姓名
consult.component.ts:24 请输入
consult.component.ts:25 请输入姓名
consult.component.ts:24 请输
consult.component.ts:25 请输入姓名

总结：

1：随着我不断的删除一些字，dom属性一直在变化，然而html属性并没变化。dom属性代表当前的值，html属性代表的是初始的值。

2：dom属性的值可以改变，html属性的值不能改变。

3：angular模板绑定是通过dom属性和事件来工作的，而不是html属性。