关于web开发:Angular都2021年了你为啥还没用Angular

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

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

Web开发须要模型和视图之间的数据同步。这些模型基本上蕴含数据值，而视图则解决用户看到的内容。因而，如果您想晓得这在Angular中是如何产生的，这篇无关Angular数据绑定的文章将为您提供帮忙。

上面提到的是此处探讨的主题：

什么是数据绑定？

数据绑定是将应用程序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”：

点击关注，第一工夫理解华为云陈腐技术~