[(ngModel)]的实现原理

时间:2022-10-21 15:26:12
讨论[(ngModel)]之前,先讲下属性绑定和事件绑定。
 
在属性绑定中,值从模型中流动到视图上的目标属性。[],通过把属性名放在方括号中来标记出目标属性。这是从模型到视图的单向数据绑定。
 
在事件绑定中,值从视图上的目标属性流动到模型。(),通过把属性名放在圆括号中来标记出目标属性。这是从视图到模型的(反向的)单向数据绑定。
 
所以,组合[]和()就可以实现双向数据绑定和双向数据流。
 
事实上,我们也可以把NgModel绑定拆分成两个独立的绑定,属性绑定和事件绑定。
eg:
NgModel绑定
<input type="text" class="form-control" id="name" required [(ngModel)]="name" name="name">
解析:[(ngModel)]绑定组件属性name。
 
改用属性绑定和事件绑定
 <input type="text" class="form-control" id="name" required
[ngModel]="name" name="name"
(ngModelChange)="name = $event" >
解析:
[(ngModel)]为属性绑定,绑定组件属性name。
 
(ngModelChange)为事件绑定,看起来可能有点怪。现在来解释下。
因为ngModelChange并非<input>元素的事件。它实际来自NgModel指令的事件属性。当Angular在表单中看到[(x)]的绑定目标时,它会期待这个x指令有一个名为x的输入属性,和一个名为xChange的输出属性。
把这里的x替换成ngModel,就可以理解得通了。
还有一个一开始看得有点蒙圈的地方,是模板表达式中的model.name = $event。我们理解的$event对象一帮来自DOM事件。但ngModelChange属性不会生成DOM事件,因为它是Angular EventEmitter类型的属性。当它触发时,$event返回的是输入框的值,也正是希望赋给组件name属性的值。
 
总结:在实践中,我们优先使用[(ngModel)]形式的双向绑定,只有当时间处理函数需要处理合并或限制按键频率等特殊情况时,才会将双向数据拆分开来,改成独立的事件处理函数(即改成上面的代码二方式来实现)。
 
注意:
当在表单中使用[(ngModel)]时,必须要定义name属性。
 
这是我学习angular2双向数据绑定时的笔记和见解,可能理解得还不够透彻,以后可能还要对它进行修缮,先打个印记吧!  O. O