angular4里一个响应式编程的小例子

响应式编程与Rxjs

最新推荐文章于 2025-06-14 09:00:05 发布

原创最新推荐文章于 2025-06-14 09:00:05 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#响应式编程 #angular4

angular 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了响应式编程的基本概念及其实现方式，通过观察者模式的实例详细展示了如何使用Rxjs来处理数据流，包括过滤、映射、订阅等操作，并提供了Angular中的响应式表单实现案例。

响应式编程

观察者模式与Rxjs

响应式编程就是一个观察者模式的实现下边是一个简单的例子

//对一个对象进行观察处理结束后在执行一些方法。
var subscription = Observable.from([1,2,3,4])//可观察者对象 Observerable(l流)
.filter((e)=>e%2 == 0)//对数据进行一些处理
.map((e)=>e*e)//对数据进行一些处理
.subscribe(//订阅Subscription
e=>console.log(e),//观察者Observer  可以处理流中发射出来的元素
err=>console.error(error),//观察者Observer  可以处理流中的异常
()=>console.log("结束了 ！")//观察者Observer 可以在流结束的时候被调用 
//后边的这两个观察者不是必须的可以去掉
); 
//这就是一个最简单的响应式编程，也是一个观察者模式，根据不同的结果进行不同的响应返回

可观察者对象 Observerable(l流)：表示一组值或者事件的集合
- 可观察对象可以流，from是发射一些数据，fromevent是发射一些事件等
- 可观察对象还可以抛出异常
- 可观察对象还可以发出一个信号告诉观察者流已经结束
观察者Observer:一个回调函数的集合，他知道怎样去监听被Observable发送的值
- 观察者可以处理流中发射出来的元素
- 观察者可以处理流中的异常
- 观察者可以在流结束的时候被调用
订阅Subscription：表示一个可观察者对象，主要用于取消注册(调用subscription.unsubscribe()取消注册订阅)
操作符Operators：纯粹的函数，是开发者可以以函数编程的方式处理结合。

响应式表单需要引入ReactiveFormsModule模块
- 该模块里边提供的一个FomControld对象是用来处理表单元素的

<!--html-->
<!--绑定搜索表单流-->
<input type="text" placeholder="输入内容" [formControl]="searchInput">

<!--ts-->
import {Component, OnInit} from '@angular/core';
import {FormControl} from "@angular/forms";
@Component({ ...})
export class SearchComponent implements OnInit {
  <!--定义了一个表单流-->
  searchInput: FormControl = new FormControl();
  constructor() {
  <!--观察者模式，当该流的值改变时进行处理-->
    this.searchInput.valueChanges
      .debounceTime(3000)//等待3秒之后在执行下边的观察者
      .subscribe(stockCode => this.getStockInfo(stockCode));
  }
  getStockInfo(stockCode:string) {
    console.log(`获取${stockCode}的股票信息`);
  }
}
<!--这就实现了当按键事件结束3000毫秒后在执行观察者的需求-->