Angular4学习笔记(五)- 数据绑定、响应式编程和管道

时间:2022-10-27 10:22:53

概念

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属性的关系:

Angular4学习笔记(五)- 数据绑定、响应式编程和管道

	<!--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即是它的具体实现,它们的关系如下:

Angular4学习笔记(五)- 数据绑定、响应式编程和管道

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

Angular4学习笔记(五)- 数据绑定、响应式编程和管道

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);
}

管道

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

Angular4学习笔记(五)- 数据绑定、响应式编程和管道

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

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>
  • 效果

    Angular4学习笔记(五)- 数据绑定、响应式编程和管道

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学习笔记 &lpar;-&rpar;

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

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

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

随机推荐

  1. 第6章 DOM节点操作

    一.创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  2. 查询条件Where

    1.字符串 $condition = 'name=\'Lily\' and age>10'; 2.数组 ['type' => 1, 'status' => 1] //生成 (type ...

  3. &lpar;Beta&rpar;Let&&num;39&semi;s-版本发布说明

      Let's App(Beta)现已隆重上市   GIT源码请戳此处 版本的新功能 我们在这一版本对于项目的规划目标主要集中在三个方面——预约用户观感,完善功能链条,改善用户体验 界面 首先,在β阶 ...

  4. hdu 4585 set应用

    #include<iostream> #include<algorithm> #include<cstring> #include<cstdio> #i ...

  5. git stash让bug来的更猛烈些吧

    git stash可以用来暂存当前正在进行的工作,比如想pull最新的代码,又不想加新commit, 或者有一个紧急的bug需要修复,但是这个bug又与你已经在做的工作(还没完成)有关联.这个时候有的 ...

  6. sql优化总结

    在项目前期目标是确保功能能够正常运行,但是随着时间的推移,数据的增加,逻辑的复杂,导致数据查询会越来越慢,这个时候我们首先想到的应该就是尽量优化sql. sql优化常见注意点: 1.对查询进行优化,应 ...

  7. BZOJ1563 NOI2009诗人小G(动态规划&plus;决策单调性)

    设f[i]为前i行的最小不协调度,转移枚举这一行从哪开始,显然有f[i]=min{f[j]+abs(s[i]-s[j]+i-j-1-m)p}.大胆猜想有决策单调性就好了.证明看起来很麻烦,从略.注意需 ...

  8. gitbook editor教程

    用户首先需要安装 nodejs,以便能够使用 npm 来安装 gitbook.所以我们先安装node.js,安装过程很简单,都是不断按下「Next」按钮就可以了 写node -h可以看看是否安装成功 ...

  9. json&period;dumps与json&period;loads实例

    import json data= { 'no' : 1, 'name' : 'Runoob', 'url' : 'http:\\www.runoob.com' } json_str = json.d ...

  10. myeclipse 上安装 Maven3

    myeclipse 上安装 Maven3   环境准备: JDK 1.6 Maven 3.0.4 myeclipse 8.6.1 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Mav ...