Angular 数据绑定概述
介绍
数据绑定是 Angular 中的主要概念之一。它可以帮助用户建立组件和 DOM 之间的通信。使用数据绑定将帮助用户开发交互式应用程序，让用户在组件和 DOM 之间交换数据，反之亦然。在以下指南中，我将探讨数据绑定中使用的一些重要技术。
插值：{{...}}
插值可帮助您使用模板表达式 ({ {}}) 将值绑定到 DOM 。模板表达式之间的值或文本将首先被评估，然后转换为字符串。然后字符串值将绑定到 DOM。
让我们考虑一个具有姓名和地址的 Person 对象的示例。在下面的示例中，将首先评估 person.name 和 person.address，然后将这些对象的值绑定到 DOM。
<li>Name: {{person.name}}</li>
<li>Adress: {{person.address}}</li>
属性绑定：[property]
属性绑定可帮助您将值从组件传递到指定的属性。这将帮助用户轻松地将数据从组件传递到指定的属性。当用户使用输入绑定将数据从父组件传递到子组件时，也会使用属性绑定。该属性可以是 HTML 属性。
如下例所示，我们将 person 对象的名称绑定到 input 标签的 value 属性。
<input type="text" [value]="person.name">
还有其他属性绑定，如属性、类和样式绑定。每当用户想要直接设置属性的值时，我们就可以使用属性绑定。如果用户想要从元素的类属性中添加和删除 CSS 类名，那么我们可以使用类绑定。如果用户想要设置内联样式，那么我们可以使用样式绑定。
让我们考虑一个根据组件中 selectedColor 的值应用背景颜色的例子。
<div [style.background-color]="selectedColor">
事件绑定：（event）=”function”
每当用户在 Angular Web 应用程序上执行某些事件（例如：单击、更改、键盘按下）时，它都会调用组件中指定的方法。
假设在下面的例子中，如果我们希望调用 fullName() 函数，则每当我们单击按钮时，我们都会将 fullName() 方法绑定到按钮标签的 (click) 事件。
<button (click)="fullName()"></button>
双向数据绑定：[(ngModel)]=”value”
双向数据绑定允许您将数据从 DOM 交换到组件，反之亦然。对于双向数据绑定，Angular 使用香蕉盒语法 [()]。香蕉盒语法基本上是属性绑定和事件绑定的组合。它还允许用户将双向数据绑定与其他技术区分开来。
让我们考虑一个例子，其中 person.name 数据属性用作输入的值，但是，如果人员更改了该值，则组件属性会自动更新为新值。假设人员姓名最初为“Jhon”，它将在开始时绑定到输入框。一旦用户在输入框中进行任何更改，假设他将人员姓名从“Jhon”更改为“Kelly”。那么组件中 person.name 对象保存的新值将为“Kelly”。同样，如果组件中对象的值发生任何更改，那么这将反映在 DOM 中。
<input type="text" [(ngModel)]="person.name">
结论
在本指南中，我们概述了 Angular 中的一些数据绑定技术以及如何使用它们在 DOM 和组件之间进行交互。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~