Angular2入门-数据绑定
▓▓▓▓▓▓ 大致介绍
Angular2中数据绑定的方式默认是以单向方式,数据绑定的方式可以分为:
1、属性绑定和插值表达式 组件类-> 模板
2、事件绑定:模板 -> 组件类
3、双向绑定: 模板 <-> 组件类
▓▓▓▓▓▓ 事件绑定
事件绑定是把模板中的事件绑定到组件类中的方法上,例如在一个组件中的HTML代码是:
<p>
<a (click)="doClick($event)">点我</a>
</p>
(click)表示要进行的操作,当用户点击时就会执行组件类中的doClick方法
export class BindComponent implements OnInit { constructor() { } ngOnInit() {
} doClick(event: any){
console.log(event.target.innertext);
} }
▓▓▓▓▓▓ 属性绑定和插值表达式
其实 属性绑定和插值表达式是同一个东西,因为在解析代码时,插值表达式会转换为属性绑定,所以你想用哪个就用哪个
下面的代码作用都是一样的
<!-- 插值表达式 -->
<img src="{{imgUrl}}" /> <!-- 属性绑定 -->
<img [src]="imgUrl" />
属性绑定又分为HTML属性绑定和DOM属性绑定,他们之间的区别是什么?先来看一个例子
<input type="text" value="hello" (input)="doInput($event)" />
doInput(event: any){
console.log(event.target.value);
console.log(event.target.getAttribute('value'));
}
浏览器的显示:
可以看到event.target.value是获取的DOM属性,是可变的。表示当前元素的状态
而event.target.getAttribute("value")获取的是HTML属性,是不可变的。只负责初始化HTML元素,不可改变
注意:
1、有些DOM属性没有映射的HTML属性,同样有些HTML属性也没有映射的DOM属性
2、模板绑定的是DOM属性
HTML属性绑定
1、基本HTML属性绑定
<td [attr.colspan]="表达式"></td>
2、css绑定
<div class="a" [class]="b"></div> //b会完全替代a
<div [class.a]="fn()"></div> //fn()返回true,false,如果true添加.a
<div [ngClass]="{a:isA,b:isB}"></div> //b会完全替代a
3、样式绑定
<button [style.color]="a?red:green">button</button>
<button [ngStyle]="{'font-style':a?'red':'green'}">button</button>
▓▓▓▓▓▓ 双向绑定
双向绑定可以从组件类 -> 模板,也可以从模板 -> 组件类
例子:
<input type="text" [(ngModel)]="name" (input)="doInput()" />
private name: string = 'asdf'; doInput(){
setInterval(() => {
this.name = 'sdf';
},3000);
}
利用[(ngModel)]可以实现双向数据绑定,首先在输入框中修改name,从而改变组件类中name的值,是模板组 -> 件类,修改值之后三秒,又重新设置name的值,是组件类 -> 模板
Angular2入门-数据绑定的更多相关文章
- Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- Angular2入门系列(五)———— 路由参数设置
Angular2入门系列(五)---- 路由参数设置路由配置: { path: '', component: CarProFile, children: [ { path: 'add', compon ...
- Angular2 入门详解
AngularJS 2 快速入门 npm是什么? npm其实是Node.js Package Manager的简称,是Node.js包管理工具(package manager) 安装Node.js ...
- Angular2 入门
1. 说明 该文档为Angular2的入门文档,可以根据该文档的内如做出一个“helloworld”类型的Angualr2入门程序,通过该文档可以初步了解Angular2的相关知识以及开发流程,同时搭 ...
- angular2入门,就这一篇就够了
背景与概念: AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行. AngularJS2 是 Angular 1.x 的升级版本,性能上得到显著的 ...
- Angular2入门--架构概览
Angular 介绍 Angular 是一款来自谷歌的开源的web前端框架,诞生于2009年,是一款优秀的前端JS框架,已经被用于谷歌的多款产品. Angular 基于Typescript开发 ,更适 ...
随机推荐
- Mac环境下.Net开发
Mono是一个由Novell公司(由Xamarin发起),并由Miguel de lcaza领导的,一个致力于开创.NET在Linux上使用的开源工程.它包含了一个C#语言的编译器,一个CLR的运行时 ...
- Nginx rewrite(重读)
Nginx Rewrite规则相关指令 Nginx Rewrite规则相关指令有if.rewrite.set.return.break等,其中rewrite是最关键的指令.一个简单的Nginx Re ...
- Javascript基础 - js中曾经忽略的知识点
深入那些曾经忽略的Javascript知识 1. parseInt(string, [radix]),parseFloat(string) 一般我们省略第二个参数,parseInt(‘100’) == ...
- 在 JavaScript 中 prototype 和 __proto__ 有什么区别
本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...
- html细节积累-01
语义错误 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素 页面可能正常解析,但不符合语义.浏览器自带容错机制,对于不规范的写法也能够正确解析,各浏览器的容错机制不同 ...
- 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列
3377: [Usaco2004 Open]The Cow Lineup 奶牛序列 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 16 Solved ...
- 1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区(题解第二弹)
1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: ...
- 安装Eclipse(android)新建项目时遇到的问题
---恢复内容开始--- 解决方案: 我先删掉了新建的项目,重新建立项目时 将API都选成相同的API19:... 然后就成功了 ---恢复内容结束---
- 关于<context:property-placeholder>的一个有趣现象
转:http://stamen.iteye.com/blog/1926166 先来看下A和B两个模块 A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块 ...
- 用 Visual Studio Code 调试 Node.js
环境: Visual Studio Code Node.js 1. 关闭运行中的程序 2.打开入口文件,我这里的入口文件为 app.js 3.点击左侧菜单栏的 debug 按钮 4.点击运行按钮 5 ...