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

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

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

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

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

o Interpolationcode

o PropertyBindingcomponent

o EventBindingorm

什么是数据绑定？

数据绑定是将应用程序 UI 或用户界面绑定到模型的机制。使用数据绑定，用户将可以使用浏览器来操纵网站上存在的元素。所以，不管什么时候更改了某些变量，该特定更改都必须反映在文档对象模型或 DOM 中。

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

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

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

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

插值绑定用于从 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 属性绑定到组件的图像属性。

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

<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 用于传达有关事件的信息。信息的这些数据值包括事件字符串，对象等。

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

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

例子：

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

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