Angular 是一个流行的前端框架，其最显著的特点就是数据绑定。数据绑定允许我们在应用程序中动态地更改数据，同时更新用户接口，而不需要通过 DOM 操作手动管理它们。在这篇文章中，我们将介绍使用 Angular 进行数据绑定的基础知识和实用技巧。
Angular 中的数据绑定
在 Angular 中有三种类型的数据绑定。
插值绑定
最简单的数据绑定就是插值绑定，它允许我们将数据呈现为 HTML。要完成插值绑定，我们需要使用双大括号（{{}}）将表达式包裹起来。
<h1>{{ page_title }}</h1>在上面的示例中，Angular 将会在模板中查找名为 "page_title" 的属性，并将其插入到 h1 元素中。
属性绑定
属性绑定让我们能够设置 HTML 元素的属性，以此来表达数据。我们需要使用方括号（[]）将属性名称包裹起来。
<img [src]="image_url">
在上面的示例中，Angular 将会在组件中查找名为 "image_url" 的属性，并将其指派给 img 标签的 src 属性。
事件绑定
事件绑定允许我们响应 HTML 元素事件，并触发一个处理程序函数。我们需要使用小括号（()）将事件名称和处理程序函数包裹起来。
<button (click)="ButtonClick()">Click Me!</button>
在上面的示例中，Angular 将会在组件中查找名为 "ButtonClick" 的函数，并在按钮被单击时调用它。
双向绑定
双向绑定让我们能够通过输入框控件中的值改变数据，同时也能通过在组件中更改数据来更新输入框中的值。双向绑定需要我们使用方括号和小括号的结合方式。
我们需要使用方括号将属性名称包裹起来，以将它与组件中的数据绑定到一起。接着，我们需要使用小括号包裹起来的事件名称来监听输入框值的变化。
<input [(ngModel)]="username" (ngModelChange)="OnUsernameChange()">
在上面的示例中，Angular 将会用组件中名为 "username" 的属性来绑定到输入框的值。当输入框的值更改时，组件中名为 "OnUsernameChange" 的函数将被调用。
组件中的数据绑定
在 Angular 组件中，一个属性可以通过 @Input 装饰器来标识，该属性可以从其父组件中进行数据绑定。
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- ------------ --------- ------- ------- --------- -- ------ ----- -------------- - -------- -------- ------- -
在上面的示例中，@Input 装饰器将 "message" 属性标记为可以从其父组件绑定到子组件中的属性。
<app-child [message]="hello"></app-child>
在上面的示例中，我们使用了方括号将属性名包裹起来，并将其与组件中的属性进行绑定。
总结
Angular 的数据绑定让我们在应用程序中更轻松地管理数据和用户界面之间的关系。在本文中，我们介绍了Angular中的数据绑定的基础知识和实用技巧，包括插值绑定、属性绑定、事件绑定以及双向绑定。我们还了解了如何在组件中进行数据绑定。
希望这篇文章可以帮助你更好地理解 Angular 中的数据绑定。如果您想进一步深入，建议你参考官方文档并开始使用 Angular 进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647d90b4968c7c53b085a093