事件绑定和属性绑定有什么区别？

Question

在角度2的架构中，有两个术语事件绑定和属性绑定。他们之间有什么区别？

Answer 1

属性绑定 -

如果你必须将值从父组件传递给子组件（无论值是静态还是动态），我们必须使用property binding这意味着我们在组件上使用属性发送值，使用@Input注释来获取父项，例如属性绑定，请参阅此处 -

<my-child [myProp]="prop" />

事件绑定 -

从父组件中捕获子事件/方法

每当我们必须通过点击或其他来自子组件的事件触发某些事件并传递给我们必须使用的父组件Event Binding时，请参阅下面的示例 -

<my-child [myProp]="prop" (onPropChange)="onPropChange($event)"</strong> />

这里我们有用户onPropChange作为事件绑定，我们可以使用EventEmitter捕获并触发该事件。

有关详细信息，请参阅此处

• http://errietta.me/blog/angular2-property-event-binding/

Answer 2

第1行：

input [value]="username" (input)="username = $event.target.value"

第2行：

Hello {{username}}!

让我们仔细看看这里发生了什么：

• [value]=”username” - 将表达式username绑定到input元素的value属性。
• (input)=”expression” - 是一种将表达式绑定到input元素输入事件的声明方式（是的，这样的事件）。
• username = $event.target.value - 触发输入事件时执行的表达式。
• $event - Angular在事件绑定中公开了一个表达式，它具有事件有效负载的值。

考虑到这些观察结果，很明显发生了什么。我们将username表达式的值绑定到输入的value属性（数据进入组件）。