概念

Angular中的数据绑定指的是同一组件中控制器文件(.ts)与视图文件(.html)之间的数据传递。

分类

流向

单向绑定

它的意思是要么是ts文件为html文件赋值,要么相反。

ts->html

	<div>
<img src="{{imgUrl}}">
<img [src]="imgUrl">
</div>

html->ts

<input (keyup)="press($event)">

小结:ts->html使用插值表达式{{value}}[attr],html->ts使用(event)。ts->html较为常用。

双向绑定

ts文件与html文件中绑定的值同时改变。

下列代码表示当HTML文件输入框内容改变时,ts文件的属性name的值同时改变。

	<input [(ngModel)]="name">

它的作用等于:

html

	<input [value]="name" (input)="doOnInput($event)">

ts

  doOnInput(event: any) {
this.name = event.target.value;
}

目标

Dom属性

首先看看Dom属性和HTML属性的关系:

	<!--Dom属性绑定-->
<input value="Yan" (input)="doOnInput($event)">

HTML属性

上面已经提到,colspan没有对应的Dom属性,只能使用HTML属性绑定:

	<!--html属性绑定-->
<table border="solid">
<tr>
<!-- 以下表达式会报错:colspan不是td的属性
<td [colspan]="colspanSize">hello</td>
-->
<td [attr.colspan]="colspanSize" align="center">hello</td>
</tr>
<tr>
<td>嘻嘻</td>
<td>哈哈</td>
</tr>
</table>
protected colspanSize: number = 2;

类绑定

<!--单一类的控制-->
<div class="a b" [class.c]="isBig">判定是否有c类:{{isBig}}</div>
<!--多个类的控制-->
<div [ngClass]="divClasses">是否有类a:{{divClasses.a}}、b:{{divClasses.b}}和c:{{divClasses.c}}</div>
<!--以下两种方式效果相同,均为divClass的值'fontRedClass'-->
<div [class]="divClass">红色字体</div>
<div class="{{divClass}}">红色字体</div>
protected divClass = 'fontRedClass';

  protected divClasses: any = {
a: Math.random() < 0.5,
b: Math.random() < 0.5,
c: Math.random() < 0.5
};
.fontRedClass {
color:red;
}
.a {
background: yellowgreen;
}
.b {
font-family: 华文隶书;
}
.c {
font-size: 20px;
}

样式绑定

<!--单一样式绑定-->
<div [style.color]="isRed?'red':'green'">单一样式绑定</div>
<!--多个样式绑定-->
<div [ngStyle]="divStyles">多个样式绑定</div>
protected isRed = Math.random() < 0.5;
protected divStyles: any = {
color: 'red',
background: 'yellowgreen'
};

响应式编程

响应式编程主要是通过观察者模式实现,在Angular中的Rxjs即是它的具体实现,它们的关系如下:



在Rxjs中,观察者模式的基本实现如下:

Observable类似于java中的Stream

上图只是简单的数组流,实际上,万物皆可用流处理,比如页面上的按钮点击事件:

import {Observable} from 'rxjs/';

let button = document.querySelector('button');

Observable.fromEvent(button,'click');

使用formControl来监听输入的值,并用流的方式处理(打印):

<!--响应式编程-->
<input [formControl]="formControl">

注意:要使用[formControl]需要在app.module.ts中引入模块ReactiveFormsModule

import {FormControl} from '@angular/forms';

protected formControl: FormControl = new FormControl();

constructor() {
this.formControl.valueChanges
.debounceTime(500).subscribe(bookname => this.print(bookname));
}

模板变量

模板变量是在html标签上使用#开头来定义的变量,它代表html元素本身。

<input (keyup)="onKeyUp($event)">
<input #iValue (keyup)="onKeyUp(iValue.value)">
 onKeyUp(param: any) {
let iInput;
try {
iInput = param.target.value;
} catch (e) {
iInput = param;
}
console.log(iInput);
}

管道

管道是用来对输入的数据进行处理,如大小写转换、数值和日期格式化等。

基础知识不再赘述,请看推荐博客:

Demo:

  • 生成组件ng g component pipe
  • html
<p>我的生日是:{{birthday | date:'yyyy-MM-dd'}}</p>
<p>我的名字是:{{name | uppercase}}</p>
<p>我的存款是:{{deposit | number:'2.2-2'}}万</p>
  • ts
  protected birthday:Date = new Date(1989,1,19);
protected name:string = 'Vito';
protected deposit:number = 1.23456;
  • 自定义管道age:ng g pipe pipe/age
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'age'
})
export class AgePipe implements PipeTransform { transform(value: any, args?: any): any {
let year: number = new Date().getFullYear();
let res:string;
if (args)
{
res = (year- value.getFullYear()+ 1) +'(虚)';
} else {
res = year- value.getFullYear() +'';
}
return res;
} }
  • html中新增
<p>我的年龄是:{{birthday | age:true}}岁</p>
  • 效果

Demo

数据绑定

Angular4学习笔记(五)- 数据绑定、响应式编程和管道的更多相关文章

  1. Angular09 数据绑定、响应式编程、管道

    1 数据绑定的分类 1.1 单向数据绑定 1.1.1 属性绑定 -> 数据从组件控制类到组件模板 DOM属性绑定 HTML属性绑定 1.1.2 事件绑定 -> 数据从组件模板到组件控制类 ...

  2. CSS3学习笔记--media query 响应式布局

    语法:@media screen and (min-width: 320px) and (max-width : 479px) media属性后面跟着的是一个 screen 的媒体类型(上面说过的十种 ...

  3. Bootstrap 学习笔记 项目实战 响应式轮播图

    左右两个箭头可以随浏览器缩放进行移动 保持在图片中间 Html代码: <!DOCTYPE html> <html lang="zh-cn"> <hea ...

  4. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  5. 【响应式编程的思维艺术】 (1)Rxjs专题学习计划

    目录 一. 响应式编程 二. 学习路径规划 一. 响应式编程 响应式编程,也称为流式编程,对于非前端工程师来说,可能并不是一个陌生的名词,它是函数式编程在软件开发中应用的延伸,如果你对函数式编程还没有 ...

  6. Angular4学习笔记-目录汇总

    Angular4学习笔记(一)-环境搭建 Angular4学习笔记(二)-在WebStorm中启动项目 Angular4学习笔记(三)- 路由 Angular4学习笔记(四)- 依赖注入 Angula ...

  7. 响应式编程(Reactive Programming)(Rx)介绍

    很明显你是有兴趣学习这种被称作响应式编程的新技术才来看这篇文章的. 学习响应式编程是很困难的一个过程,特别是在缺乏优秀资料的前提下.刚开始学习时,我试过去找一些教程,并找到了为数不多的实用教程,但是它 ...

  8. 函数响应式编程及ReactiveObjC学习笔记 (-)

    最近无意间看到一个视频讲的ReactiveObjC, 觉得挺好用的 但听完后只是了解个大概. 在网上找了些文章, 有的写的比较易懂但看完还是没觉得自己能比较好的使用RAC, 有的甚至让我看不下去 这两 ...

  9. 响应式编程笔记三:一个简单的HTTP服务器

    # 响应式编程笔记三:一个简单的HTTP服务器 本文我们将继续前面的学习,但将更多的注意力放在用例和编写实际能用的代码上面,而非基本的APIs学习. 我们会看到Reactive是一个有用的抽象 - 对 ...

随机推荐

  1. Python3面向对象基础

    面向对象概述 面向对象 面向对象的世界,引入了对象的概念,对象具有属性:数据,对象具有过程或者方法:成员函数.成员函数的作用就是处理属性. 例子 对象:Car 属性:fuel_level, isSed ...

  2. GPSCamera隐私声明

    GPSCamera获取了以下敏感隐私权限用于照片水印展示: 1:修改或删除您的SD卡中的内容 2:访问确切位置信息(使用 GPS 和网络进行定位) 3:访问大致位置信息(使用网络进行定位) 4:拍摄照 ...

  3. Codeforces Round #532 (Div. 2)

    Codeforces Round #532 (Div. 2) A - Roman and Browser #include<bits/stdc++.h> #include<iostr ...

  4. 转:甲骨文发布大数据解决方案 含最新版NoSQL数据库

    原文出处: http://www.searchdatabase.com.cn/showcontent_88247.htm 以下是部分节选: 最新发布的大数据创新成果包括: Oracle Big Dat ...

  5. reveal 使用注意事项

    **将libReveal.dylib 和 Reveal.framework 继承进项目后,一定要在 Build Phases->Link Binary With Libraries中将二者删除. ...

  6. Java并发(理论知识)—— 线程安全性

    1.什么是线程安全性                                                                                      当多个线 ...

  7. DateTables的服务器分页

    function InitTable() { var table = $('#tbl_users').DataTable(); if ($.fn.dataTable.isDataTable('#tbl ...

  8. Recover database using backup controlfile until cancel

    http://searchoracle.techtarget.com/answer/Recover-database-using-backup-controlfile-until-cancel Wha ...

  9. Spring导出可以运行的jar包

    最近需要解决Maven项目导入可执行的jar包的问题,如果项目不包含Spring,那么使用mvn assembly:assembly即可,详情可以参考:http://www.cnblogs.com/l ...

  10. ANTLR flex/bison

    https://stackoverflow.com/questions/29971097/how-to-create-ast-with-antlr4 这个很值得仔细看 https://github.c ...