• [(ngModel)]的实现原理


    讨论[(ngModel)]之前,先讲下属性绑定和事件绑定。
     
    在属性绑定中,值从模型中流动到视图上的目标属性。[],通过把属性名放在方括号中来标记出目标属性。这是从模型到视图的单向数据绑定。
     
    在事件绑定中,值从视图上的目标属性流动到模型。(),通过把属性名放在圆括号中来标记出目标属性。这是从视图到模型的(反向的)单向数据绑定。
     
    所以,组合[]和()就可以实现双向数据绑定和双向数据流。
     
    事实上,我们也可以把NgModel绑定拆分成两个独立的绑定,属性绑定和事件绑定。
    eg:
    NgModel绑定
    <input type="text" class="form-control" id="name" required [(ngModel)]="name" name="name">
    解析:[(ngModel)]绑定组件属性name。
     
    改用属性绑定和事件绑定
    1 <input type="text" class="form-control" id="name" required           
    2     [ngModel]="name" name="name"
    3     (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
  • 相关阅读:
    jmeter接口测试----7文件上传
    jmeter接口测试----6获取所有学生信息
    jmeter接口测试----5学生金币充值
    jmeter接口测试----4添加学生信息
    jmeter接口测试----3登录
    jmeter接口测试----2获取学生信息
    jmeter接口测试----1准备阶段
    Android程序员必备精品资源 工具类
    android sdk更新后出现please update ADT to the latest version的解决方法
    Android IntentService完全解析 当Service遇到Handler
  • 原文地址:https://www.cnblogs.com/JennyLin77/p/6141124.html
Copyright © 2020-2023  润新知