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开发 ,更适 ...
随机推荐
- 什么是vue?
vue就是一个js库,并且无依赖别的js库,直接引入一个js文件就可以使用,跟jquery差不多.vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的 ...
- MongoDB分布式
结构: ShardServer1:27020 ShardServer2:27021 ShardServer3:27022 ShardServer4:27023 ConfigServer:27100 R ...
- WEB标准了解
今天看到朋友的简历有一项“了解WEB标准”,就特地了解了一下什么是WEB标准.现在就一项一项地解开自己的疑惑. 1.什么是WEB标准 WEB标准大部分由万维网组织(W3C)制定的WEB程序开发规范.W ...
- C++拷贝构造&操作符重载
头文件 DString.h如下 #ifndef __DSTRING_H #define __DSTRING_H #endif #include <stddef.h> class DStri ...
- SQL Sever数据库的基本操作和它的建立
SQL数据库: 1.数据库概述 (1) 用自定义文件格式保存数据的劣势. (2) DBMS(DataBase Management System,数据库管理系统)和数据库,平时谈到"数据库& ...
- .NET 知识整理笔记
本文纯属自己理解着写的,如果有什么错误或者不全面希望读者能够加以补充!~ 1.Web.Config配置文件的节点操作. 在Web.Config中写入. <configuration> &l ...
- wemall app商城源码中实现带图片和checkbox的listview
wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享其中实现带图片和checkbox的listvi ...
- MP3 信息读取
MP3 信息读取 运行环境:Window7 64bit,.NetFramework4.61,C# 7.0: 编者:乌龙哈里 2017-03-13 参考: MP3-wikipedia ID3v1 MPE ...
- swift -- 构造/析构函数
一.构造函数 //当一个类实例化一个对象时候,第一个调用的方法 class Student { //属性 var name = "ser" let age : Int //1.重 ...
- 有关ospf抓包
有关ospf抓包 1.相关的路由器为这样子的: 路由器都运行了ospf: 抓包的链路为GE0/0/2 , 2.抓包图: 从图上我们可以看到,protocol info 这一栏里面出现了: hello ...