每天学习一点点，成功增加一大步

Angular笔记：数据绑定

Angular zhanghui 4083℃

数据绑定是指允许将组件控制器中的属性和方法与组件的模板连接起来，使用数据绑定大大降低了开发时的编码量。

这一章节主要涉及到：

  • 事件绑定
  • 属性绑定
  • HTML 属性绑定
  • 双向绑定
  • 响应式编程
  • 管道

在前面的例子已经看到数据绑定的语法，比如说：

// 使用插值表达式将一个表达式的值显示在模板上
<h1>{{productTitle}}</h1>
// 使用方括号将 HTML 标签的一个属性绑定到一个表达式上
<img [src]="imgUrl">
// 使用小括号将组件控制器的一个方法绑定为模板上一个事件的处理器
<button (click)="toProductDetail()">商品详情</button>

在 Angular 中的默认的数据绑定是以单向方式实现，比如上个例子中的前两种，要么是将模板上的事件绑到组件控制器的方法上，像最后一个。接下来会逐个讲解不同的绑定方法。

一、事件绑定

例如：

// 组件方法名称绑定
<button (click)="onButtonClick($even)"></button>
// 也可以是属性赋值
<button (click)="saved = true"></button>

例如这里点击事件，在控制器中事件代码为：

onButtonClick(even:any) {
  console.log(even);
}

当点击后例会返回该控件中的所有属性。

二、属性绑定

首先建立空的项目，在项目中创建名为 BindComponent 的组件

2.1、概念一：插值表达式与属性绑定是一个东西

先看一个例子,在控制器中输入赋值代码：

imgUrl:string = "http://placehold.it/500x300";

再然后在模板里面输入：

<img [src]="imgUrl">

以上这种写法与插值表达式基本上是相同的。如下行代码，Angular 在编译时会将这种插值表达式翻译成属性绑定。只是说在编写代码时尽量养成一种编写风格。

<img src="{{imgUrl}}">

效果如下图

2.2、概念二：HTML 属性与 DOM 属性的区别

再来个例子：

控制器的代码：

doOnInput(event:any) {
  // 打开的是 DOM 属性
  console.log('DOM:'+event.target.value);
  // 打开的是 HTML 属性
  console.log('HTML:'+event.target.getAttribute('value'));
}

模板代码：

<input value="Tom" (input)="doOnInput($event)">

然后再观察打印出来的 DOM 属性是时刻监听着变化，而 HTML 属性是保存不变，初始化的时候是什么就是什么，效果如下图：


HTML 属性和 DOM 属性的关系

  • 少量 HTML 属性和 DOM 属性之间有着 1:1 的映射，如id。
  • 有些 HTML 属性没有的 DOM 属性，如 colspan。
  • 有些 DOM 属性没有对应的 HTML 属性，如 textContent。
  • 就算名字相同，HTML 属性和 DOM属性也不是同一样东西。
  • HTML 属性的值指定了初始值， DOM 属性的值表示当前值。
  • ANGULAR 的模板绑定是通过 DOM 属性和事件来工作的，而不是 HTML 属性。

结合以上六点，再回顾第一大点的例子，可以得出的结论是“插值表达式”是通过 DOM 属性的绑定来实现的。

转载请注明：隨習筆記 » Angular笔记：数据绑定

1 2 3 4 下一页
喜欢 (0)