▓▓▓▓▓▓ 大致介绍

  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入门-数据绑定的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  3. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  4. Angular2入门系列教程4-服务

    上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...

  5. Angular2入门系列(五)———— 路由参数设置

    Angular2入门系列(五)---- 路由参数设置路由配置: { path: '', component: CarProFile, children: [ { path: 'add', compon ...

  6. Angular2 入门详解

    AngularJS 2 快速入门 npm是什么?   npm其实是Node.js Package Manager的简称,是Node.js包管理工具(package manager) 安装Node.js ...

  7. Angular2 入门

    1. 说明 该文档为Angular2的入门文档,可以根据该文档的内如做出一个“helloworld”类型的Angualr2入门程序,通过该文档可以初步了解Angular2的相关知识以及开发流程,同时搭 ...

  8. angular2入门,就这一篇就够了

    背景与概念: AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行. AngularJS2 是 Angular 1.x 的升级版本,性能上得到显著的 ...

  9. Angular2入门--架构概览

    Angular 介绍 Angular 是一款来自谷歌的开源的web前端框架,诞生于2009年,是一款优秀的前端JS框架,已经被用于谷歌的多款产品. Angular 基于Typescript开发 ,更适 ...

随机推荐

  1. Mac环境下.Net开发

    Mono是一个由Novell公司(由Xamarin发起),并由Miguel de lcaza领导的,一个致力于开创.NET在Linux上使用的开源工程.它包含了一个C#语言的编译器,一个CLR的运行时 ...

  2. Nginx rewrite(重读)

    Nginx Rewrite规则相关指令  Nginx Rewrite规则相关指令有if.rewrite.set.return.break等,其中rewrite是最关键的指令.一个简单的Nginx Re ...

  3. Javascript基础 - js中曾经忽略的知识点

    深入那些曾经忽略的Javascript知识 1. parseInt(string, [radix]),parseFloat(string) 一般我们省略第二个参数,parseInt(‘100’) == ...

  4. 在 JavaScript 中 prototype 和 __proto__ 有什么区别

    本文主要讲三个 问题 prototype 和 proto function 和 object new 到底发生了什么 prototype 和 proto 首先我们说下在 JS 中,常常让我们感到困惑的 ...

  5. html细节积累-01

    语义错误 块级元素可以包含内联元素和某些块级元素,内联元素不能包含块级元素,只能包含内联元素 页面可能正常解析,但不符合语义.浏览器自带容错机制,对于不规范的写法也能够正确解析,各浏览器的容错机制不同 ...

  6. 3377: [Usaco2004 Open]The Cow Lineup 奶牛序列

    3377: [Usaco2004 Open]The Cow Lineup 奶牛序列 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 16  Solved ...

  7. 1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区(题解第二弹)

    1675: [Usaco2005 Feb]Rigging the Bovine Election 竞选划区 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit:  ...

  8. 安装Eclipse(android)新建项目时遇到的问题

    ---恢复内容开始--- 解决方案: 我先删掉了新建的项目,重新建立项目时 将API都选成相同的API19:... 然后就成功了 ---恢复内容结束---

  9. 关于<context:property-placeholder>的一个有趣现象

    转:http://stamen.iteye.com/blog/1926166 先来看下A和B两个模块 A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块 ...

  10. 用 Visual Studio Code 调试 Node.js

    环境: Visual Studio Code  Node.js 1. 关闭运行中的程序 2.打开入口文件,我这里的入口文件为 app.js 3.点击左侧菜单栏的 debug 按钮 4.点击运行按钮 5 ...