三种类型的数据绑定指令之间有什么区别：Angular4 中的 [val] ， [(val)] ， (val)

Question

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

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

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

事件绑定 (val):到目前为止您遇到的绑定指令使数据单向流动：从组件到元素。

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

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

双向绑定[(val)]：您经常希望在用户进行操作时既显示数据属性又更新属性变化。

在元素端，结合设置特定元素属性和侦听元素更改事件。

Angular 为此目的提供了一种特殊的双向数据绑定语法 [(x)]。 [(x)] 语法结合了属性绑定的括号 [x] 和事件绑定的括号 (x).

Answer 2

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

三种类型的数据绑定指令之间有什么区别：Angular4 中的 [val] ， [(val)] ， (val)

What is the difference between three types of data binding directives : [val] , [(val)] , (val) in Angular4

javascript

angular

angular4-forms