Angular8 实战（十八）组件的双向绑定

本章讲解组件的双向绑定~
首先新建一个网格组件，本章并不会实现其内容，只是用来演示一下组件的双向绑定。新建组件的过程就不再此赘述。

18-1.png

其实之前我们的案例中已经多次使用了，那么双向到底是什么？

看一下小示例

18-2.gif

[value]=“username” --绑定username值到input的value
(input)="表达式" --绑定表达式到input的input事件
username = event --表达式，提供事件的数据
这其实就是一个双向绑定的案例，双向绑定就是属性绑定+事件绑定。

ngModel

ngModel，是Angular提供的专门用于双向绑定的指令，是FormsModule中提供的指令
注意：如果要使用ngModel指令，必须要导入FormsModule
使用[(ngModle)]="变量"形式进行双向绑定。
示例看一下

18-3.gif

其实这就是一个语法糖，实际上就是属性+事件。本质上等价于下面的表达式

[ngModel]="username" (ngModelChange)="username = $event"

那么，如果不用ngModel指令，我们也可以在组件中使用get,set来实现类似的效果。

18-4.gif