(七)数据绑定，响应式编程和管道

（一）数据绑定

未标题-1.jpg

1.数据绑定

未标题-1.jpg

添加一些键盘事件

(kerup.enter)按键并回车
(kerup.space)按键并空格 
(kerup.contro)按键并ctrl 
(kerup.shift)按键并shift
(kerup.alt)按键并alt

（二）DOM属性绑定

<img [src]=''imgUrl''>
<img src = "{{imgUrl}}"

DOM属性和HTML属性。（input）
上面是DOM属性，下面为HTML属性。
html属性表示初始值，（不变）
dom属性表示现在值。（可变）

未标题-1.jpg

三张图说明关系

未标题-1.jpg
未标题-1.jpg

（三）HTML属性绑定

1.基本HTML属性绑定

未标题-1.jpg

2.CSS类绑定

未标题-1.jpg

3.样式绑定

未标题-1.jpg

（四）双向绑定,一般元素加上也没用（input有用）

[(ngModel)] = "name"

（五）管道（可以链试使用）（asyns异步管道先不说）

未标题-1.jpg
未标题-1.jpg

（五）2自定义管道
使用cli工具（注意他有声明但是cli已经替你处理了）
ng g pipe 管道位置和名称
args----参数（可选）
value -----原始值

未标题-1.jpg

（六）响应式编程

1.主模块里引入ReactiveFormsModule

未标题-1.jpg
2.组件模块上添加
import 'rxjs/Rx'
3.申明变量变量类型为FormControl
未标题-1.jpg
4.html上数据绑定
未标题-1.jpg
5.构造函数上订阅事件使数据绑定到另一个变量上 image.png