Web开发需要模型和视图之间的数据同步。这些模型基本上包含数据值，而视图则处理用户看到的内容。因此，如果您想知道这在Angular中是如何发生的，这篇有关Angular数据绑定的文章将为您提供帮助。

下面提到的是此处讨论的主题：

What is Data Binding?

Types of Data Binding in Angular

One-way Data Binding

Interpolation

Property Binding

Event Binding

Two-way Data Binding

什么是数据绑定？

数据绑定是将应用程序UI或用户界面绑定到模型的机制。使用数据绑定，用户将能够使用浏览器来操纵网站上存在的元素。因此，无论何时更改了某些变量，该特定更改都必须反映在文档对象模型或DOM中。

在Angular中，数据绑定定义了组件与DOM之间的交互。从AngularJS一直到最新的Angular 9版本，数据绑定是所有Angular版本的一部分。

Angular中的数据绑定类型

Angular允许单向和双向数据绑定。单向数据绑定是一种简单的数据绑定类型，您可以在其中通过模型来操纵视图。这意味着，对Typescript代码进行的更改将反映在相应的HTML中。在Angular中，单向数据绑定是通过以下方式实现的：

Interpolation or String Interpolation

Property binding

Event binding

另一方面，双向数据绑定允许以如下方式同步数据：可以使用模型更新视图，而可以使用视图更新模型。这意味着您的应用程序将能够在组件类及其模板之间共享信息。

单向数据绑定

在单向数据绑定中，数据仅沿一个方向流动，即从模型流向视图。如前所述，Angular中的单向数据绑定可以为三种类型，即插值，属性绑定和事件绑定。

Interpolation Binding

插值绑定用于从TypeScript代码（即从组件到视图）返回HTML输出。在此，模板表达式在双花括号内指定。通过插值，可以将字符串添加到HTML元素标签之间以及属性分配内的文本中。这些字符串是使用Template表达式计算的。

例子：

{{title}}

在上面的示例中，图像元素的src属性绑定到组件的图像属性。

Property binding and Interpolation

如果您已经注意到，可以看到插值和属性绑定可以互换使用。看一下下面给出的示例对：

Interpolation

Property binding

请注意，当需要将元素属性设置为非字符串数据值时，必须使用属性绑定而不是Interpolation。

事件绑定

使用事件绑定功能，您可以侦听某些事件，例如鼠标移动，按键，点击等。在Angular中，可以通过在等号（=）左侧的常规方括号内指定目标事件名称来实现事件绑定，以及右引号（“”）内的模板语句。

例子：

上例中的“ click ”是目标事件的名称，“ goBack（）”是模板的语句。

输出：

每当发生事件绑定时，Angular都会为目标事件设置事件处理程序。当该特定事件引发时，模板语句由处理程序执行。通常，接收者会涉及执行响应事件的操作的模板语句。在这里，binding用于传达有关事件的信息。信息的这些数据值包括事件字符串，对象等。

Two-way Binding

Angular允许双向数据绑定，这将允许您的应用程序在两个方向上共享数据，即从组件到模板，反之亦然。这样可以确保应用程序中存在的模型和视图始终保持同步。双向数据绑定将执行两件事，即元素属性的设置和侦听元素更改事件。

双向绑定的语法为– [（）}。如您所见，它是属性绑定语法（即[]和事件绑定语法（））的组合。根据Angular的说法，此语法类似于“盒子里的香蕉”。

例子：

Name:

执行此代码时，您将看到对模型或视图的更改将导致对相应视图和模型的更改。看一下下面的图片，该图片从视图中将课程名称从“ Python”更改为“ Pytho”：

这使我们到“Angular Data Binding”文章的结尾。希望这对您有帮助，并能为您带来更多价值。

Angular web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。