javascript - Angular4中三种类型的数据绑定(bind)指令 : [val] , [(val)] , (val) 有什么区别

Question

考虑下面的代码，我试图理解三种不同的数据绑定(bind)方法之间的区别。由于我是 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>

Answer 1

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

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

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

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

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

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

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

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