Angular4 中的三种数据绑定指令有什么区别： [val] , [(val)] , (val)答案

【问题标题】：What is the difference between three types of data binding directives : [val] , [(val)] , (val) in Angular4Angular4 中的三种数据绑定指令有什么区别： [val] , [(val)] , (val)
【发布时间】：2018-01-10 18:14:33
【问题描述】：

考虑到下面的代码，我试图了解三种不同的数据绑定方式之间的区别。由于我是 angular4 的新手，我需要明确何时使用什么。例如分配 ngModel，使用 [(ngModel)]。要分配禁用属性，请使用 [disabled]。要分配 ngSubmit 处理程序，使用 (ngSubmit)。很难区分它们中的每一个。

<section class="sample-app-content">
    <h1>Template-driven Form Example:</h1>
    <form #f="ngForm" (ngSubmit)="onSubmitTemplateBased()">
        <p>
            <label>First Name:</label>
            <input type="text"  
                [(ngModel)]="user.firstName" required>
        </p>

        <p>
            <label>Password:</label>
            <input type="password"  
                [(ngModel)]="user.password" required>
        </p>
        <p>
            <button type="submit" [disabled]="!f.valid">Submit</button>
        </p>
    </form>
</section>

【问题讨论】：

标签： javascript angular angular4-forms

【解决方案1】：

属性绑定 [val]：单进人们经常将属性绑定描述为单向数据绑定，因为它将值沿一个方向流动，从组件的数据属性到目标元素属性。

您不能使用属性绑定从目标元素中提取值。您不能绑定到目标元素的属性来读取它。只能设置。

事件绑定 (val)：到目前为止，您遇到的绑定指令将数据流向一个方向：从组件到元素。

用户不只是盯着屏幕。他们在输入框中输入文本。他们从列表中挑选项目。他们点击按钮。此类用户操作可能会导致相反方向的数据流：从元素到组件。

了解用户操作的唯一方法是监听某些事件，例如击键、鼠标移动、点击和触摸。您通过 Angular 事件绑定声明您对用户操作的兴趣。

双向绑定 [(val)]：您通常希望显示数据属性并在用户进行更改时更新该属性。

在元素方面，它结合了设置特定元素属性和监听元素更改事件。

Angular 为此提供了一种特殊的双向数据绑定语法 [(x)]。 [(x)] 语法将属性绑定的括号 [x] 与事件绑定的括号 (x) 组合在一起。

【讨论】：

【解决方案2】：

属性绑定用 [ ] 表示。 [disabled][src][data]
事件绑定用 () 表示。 (click)(keypress)(hover)
双向绑定用 [()] 表示，因为有一个属性绑定和一个事件绑定发生在幕后。 [(ngModel)]

【讨论】：