angular2响应式编程流
来源:互联网 发布:通过网络英文怎么说 编辑:程序博客网 时间:2024/06/01 07:14
响应式编程:
就是异步数据流编程,例如一个单机的事件就是一个流。
是以观察者模式为核心的,rxjs概念
什么是观察者模式?
有两个对象,一个是可观察对象(Observable流),一个是观察者。
先在可观察对象内部注册一些观察者对象,如果可观察对象内部发生了变化的时候,他就会调用观察者中的一些方法,作出一变化。
var subscription = Observable.from([1,2,3,4])//from是自带的方法会帮你创建一个流,还有fromEvent事件,fromPromise异常,fromEventPattern等 .filter(e => e%2 ==0)//filter过滤条件 .map(e => e*e)//得到求平方的流 .subscribe(//订阅然后作出处理方法 e => console.log(e),//观察者 error => console.error(error),//观察者 () =>console.log("结束了")//观察者 );
取消关注
subscription.unsubscribe();
//html代码:<input [FormControl]='seacrhInput'>//如果input的值有改变的时候,ts文件里的seacrhInput就会调用他的valueChanges方法,将数据存到流里面去。//ts代码:import { Component, OnInit } from '@angular/core';import{ Observable } from 'rxjs';@Component({ selector: 'app-my-goods', templateUrl: './my-goods.component.html', styleUrls: ['./my-goods.component.css']})export class MyGoodsComponent implements OnInit { public seacrhInput:FormControl = new FormControl(); constructor() { this.seacrhInput.valueChanges .debounceTime(500)//500毫秒没有操作的时候就有下面的订阅处理数据 .subscribe(e => this.getValue(e)) } ngOnInit() { } getValue(a){ console.log(a) }}
html:<input (keyup)='key($event)'>ts:key(event){ console.log(event.target.value);//会输出input的输出值}
html:<input #name (keyup) = 'key(name.value)'>ts:key(name:string){ console.log(name);}
阅读全文
0 0
- angular2响应式编程流
- Angular2响应式表单
- Angular2 响应式表单验证
- Angular2 响应时模版
- angular2响应式表单禁用和只读设置
- 响应式编程:理解响应式编程
- angular2编程-ES6
- 响应式编程介绍
- ReactiveX--响应式编程
- 响应式编程Rxjava
- 响应式编程介绍
- 关于响应式编程
- 响应式编程
- IOS-响应式编程
- 函数响应式编程
- rxandroid响应式编程
- 响应式编程
- 谈谈响应式编程
- 刘兴诚的学习心得
- MySQL:获得数据库表的列名和注释
- Mac/Linux/Centos终端中上传文件到Linux
- i2c-tools的移植和使用
- 同步方法和同步代码块的区别
- angular2响应式编程流
- Kafka 0.11.0.0 是如何实现 Exactly-once 语义的
- C#DataTable导出Excel,并实现合并单元格
- Unix 网络编程(四)- 典型TCP客服服务器程序开发实例及基本套接字API介绍
- MySQL:获取某个数据库的所有表的名字
- vuejs创建类
- Spring实现控制反转(IOC)的三种方式(二)——构造器注入
- [深度学习]深度学习快速入门资料
- Ansible的循环