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

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”:

本文分享自华为云社区《什么是Angular数据绑定及其实现方式?》,原文作者:Yuchuan 。

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

Angular:都2021年了,你为啥还没用Angular的更多相关文章

  1. 2021年都要过去啦,你还在用Excel做数据可视化效果吗?

    2021年都要过去啦,你还在用Excel做数据可视化效果吗?古语有云,"工欲善其事,必先利其器",没有专业的工具,前期准备的再好也是白搭.现在运用数据可视化工具于经营活动中的企业是 ...

  2. 有了二叉查找树、平衡树(AVL)为啥还需要红黑树?

    序言 二叉查找树的缺点 平衡二叉树 虽然平衡树解决了二叉查找树退化为近似链表的缺点,能够把查找时间控制在 O(logn),不过却不是最佳的,因为平衡树要求每个节点的左子树和右子树的高度差至多等于1,这 ...

  3. Angular 1 深度解析:脏数据检查与 angular 性能优化

    TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...

  4. 都 2021 年了,Serverless 能取代微服务吗?

    来源 | Serverless 公众号 编译 | OrangeJ 作者 | Mariliis Retter "Serverless 能取代微服务吗?" 这是知乎上 Serverle ...

  5. Synchronized锁在Spring事务管理下,为啥还线程不安全?

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 大年初二,朋友问了我一个技术的问题(朋友实在是好学, ...

  6. Python慢,为啥还有大公司用?

    PyCon 是全世界最大的以 Python 编程语言 为主题的技术大会,大会由 Python 社区组织,每年举办一次.在 Python 2017 上,Instagram 的工程师们带来了一个有关 Py ...

  7. 50 个加速包都抢不到车票,还不如这个 Python 抢票神器!

    又到了一年一度的抢票大战,本来就辛苦劳累了一年,想着可以早点订到票跟家里人团聚.所以有挺多的人,宁愿多花些钱去找黄牛买票.但今年各种抢票软件的横行,还有官方出的加速包,导致连黄牛都不敢保证能买到票.你 ...

  8. 都0202年了,你还不知道javascript有几种继承方式?

    前言     当面试官问你:你了解js哪些继承方式?es6的class继承是如何实现的?你心中有很清晰的答案吗?如果没有的话,可以通过阅读本文,帮助你更深刻地理解js的所有继承方式.       js ...

  9. 都2020年了,你还不知道怎么学习Python吗?

    众所周知,Python应用广泛,涵盖后端开发.游戏开发.网络爬虫.网站开发.数据挖掘.科学运算.大数据分析.云计算.人工智能等领域,感觉像神一样的存在.Python这么火,那么从入门到精通学习Pyth ...

  10. 这都Java15了,Java7特性还没整明白?

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...

随机推荐

  1. 推荐一款“自学编程”的宝藏网站!详解版~(在线编程练习,项目实战,免费Gpt等)

    云端源想学习平台,一站式编程服务网站云端源想官网传送门 精品课程:由项目实战为导向的视频课程,知识点讲解配套编程练习,让初学者有方向有目标. 课程阶段:每门课程都分多个阶段进行,由浅入深,很适合零基础 ...

  2. ceph的应用

    创建 CephFS 文件系统 MDS 接口 -------------------- 创建 CephFS 文件系统 MDS 接口 -------------------- //服务端操作 1)在管理节 ...

  3. 在centos7上使用 docker安装mongodb挂载宿主机以及创建其数据库的用户名和密码(最新版本)

    前言 因为博主在使用docker安装mongodb并挂载时,发现在网上搜了好多都是以前版本的mongodb,并且按照他们操作总是在进入mongodb出问题,博主搞了好久终于弄好了,故写下博客,供有需要 ...

  4. 一分钟理解TCP重传

    为什么需要重传 任何信息在介质中传输可能丢失,这是由于传输介质的物理特性决定的,所以网络不可能被设计为"可靠的"(不是由于考虑"性能"原因而是压根做不到).既然 ...

  5. Redis 技术整理

    认识Redis Redis官网:https://redis.io/ Redis诞生于2009年全称是Remote Dictionary Server 远程词典服务器,是一个基于内存的键值型NoSQL数 ...

  6. 使用 PPO 算法进行 RLHF 的 N 步实现细节

    当下,RLHF/ChatGPT 已经变成了一个非常流行的话题.我们正在致力于更多有关 RLHF 的研究,这篇博客尝试复现 OpenAI 在 2019 年开源的原始 RLHF 代码库,其仓库位置位于 o ...

  7. DX后台截图C++实现代码

    DX后台截图C++实现代码 文章仅发布于https://www.cnblogs.com/Icys/p/DXGI.html和知乎上. 传统的GDI API (BitBlt)虽然可以完美的完成后台截图的任 ...

  8. Flutter搭建

    目录 下载 Flutter SDK 配置 Flutter 环境变量及镜像 检查开发环境 参考 下载 Flutter SDK flutter官网下载:https://flutter.io/sdk-arc ...

  9. Cassandra中的MerkleTree反熵机制

    构建MerkleTree Cassandra 是一个分布式数据库系统,它使用 Merkle 树来实现数据一致性和数据完整性的验证. 在 Cassandra 中,每个节点都维护着自己的数据副本.为了确保 ...

  10. 【已解决】【Tensorflow2.12.0版本以后合并CPU和GPU版】Tensorflow-gpu==2.12.0 安装失败解决办法

    直接上解决方式,需要知道原因的看后文. 直接安装 tensroflow,从 2022 年 12 月起 tensorflow-gpu 已经合并到 tensorflow 包中了 pip install t ...