Angular：都2021年了，你为啥还没用Angular

摘要：数据绑定是将应用程序UI或用户界面绑定到模型的机制。使用数据绑定，用户将可以使用浏览器来操纵网站上存在的元素。

本文分享自华为云社区《什么是Angular数据绑定及其实现方式？》，原文做者：Yuchuan 。

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表达式计算的。

例子：

<h1>{{title}}</h1>
 
Learn <b> {{course}}
</b> with Edureka.
 
2 * 2 = {{2 * 2}}
 
<div><img src="{{image}}"></div>

此代码的Typescript部分以下：

export class AppComponent {
  title = 'Databinding';
  course ='Angular';
  image = 'paste the url here'
}

输出：

component属性在两个花括号之间指定。Angular将用与该组件属性关联的字符串值替换该组件属性。根据须要能够在不一样的地方使用。角度将插值转换为属性绑定。

Angular还容许您配置插值定界符，并使用您选择的内容代替两个花括号。可使用组件元数据中的插值选项来完成此操做。

模板表达式

模板表达式位于两个大括号内，而且它们产生一个值。Angular将执行该表达式，而后将特定的表达式分配给绑定目标的属性，例如HTML元素，组件或指令。

注意：插值括号之间的2 * 2是模板表达式。

属性绑定

在“属性绑定”中，值从组件的属性流入目标元素的属性。所以，属性绑定不能用于从目标元素读取或提取数据或调用属于目标元素的方法。元素引起的事件能够经过事件绑定进行确认，事件绑定将在本文稍后介绍。

一般，能够说将使用属性绑定将组件属性值设置为元素属性。

例子：

<h1>Property binding</h1>
 
<div><img [src]="image"></div>

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

Property binding and Interpolation

若是您已经注意到，能够看到插值和属性绑定能够互换使用。看一下下面给出的示例对：

<h2>Interpolation</h2>
 
<div><img src="{{image}}"></div>
 
<h2>Property binding</h2>
 
<div><img [src]="image"></div>

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

事件绑定

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

例子：

<div>
  <button (click)="goBack()">Go back</button>
</div>

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

输出：

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

Two-way Binding

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

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

例子：

<label ><b>Name:</b>
        <input [(ngModel)]="course.name" placeholder="name"/>
      </label>

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

点击关注，第一时间了解华为云新鲜技术~