Angular 数据绑定

<image [src] = 'imgURL' >  

使用事件绑定查看到组件

这种类型的绑定用于将数据从视图绑定到组件，即从 HTML 页面绑定到组件类。这一个类似于简单的javascript的事件。它可以是一个简单的点击事件、一个按键或任何其他事件。唯一的区别是 Angular 中的事件必须放在圆括号内，其余的都是一样的。

如以下代码片段所示，有 3 个按钮及其各自的点击事件。处理这些事件的方法在代码隐藏文件中。

<button (click) = 'addDepartment()' >Add </button>  
<button (click) = 'editDepartment()' >Edit </button>  
<button (click) = 'deleteDepartment()' >Delete </button> 

同时绑定视图和组件（双向绑定）

这种类型的绑定与其他框架略有不同。双向绑定使 Component 类中的属性与 HTML 控件的值保持同步。每当我们改变 HTML 控件的值时，Component 类的属性值也会随之改变

为了在 Angular 中实现这种类型的绑定，我们使用了一个语法稍有不同的特殊指令。

<input required [(ngModel)] = 'departmentName' name = 'departmentName' >  

正如您在上面的代码片段中看到的，在 2 种类型的大括号中使用了指令ngModel 。两个大括号表示两个不同的绑定。方括号用于我们讨论的第二种类型的属性绑定，圆形用于事件绑定，第三种

我们讨论过的。 

让我们稍微谈谈这个文本框，只要这个文本框的值发生任何变化，就会触发一个事件，并且通过事件绑定，值会被传递给 Component 属性并得到更新，同样每当有任何变化时在属性值中，文本框的值也将通过属性绑定的方式得到更新。上面代码中与此文本框关联的 Component 属性是departmentName。

举个例子，当我们通过 API 调用获取一些数据时，一开始文本框不会有任何值，但是一旦 Component 类中的属性值更新，文本框的值也会得到同时更新。