Angular4-在线竞拍应用-响应式编程

• 可观察者Observable（流）：表示一组值或者事件的集合
• 观察者Observer：一个回调函数的集合，它知道怎样去监听被Observable发送的值
• 订阅Subscription：表示一个可观察对象，主要用于取消注册
• 操作符Operators：纯粹的函数，使开发者可以以函数编程的方式处理集合。

A被赋值为B和C的值。这时，如果我们改变B的值，A的值并不会随之改变。而如果我们运用一种机制，当B或者C的值发现变化的时候，A的值也随之改变，这样就实现了”响应式“。

下面三个重要的概念是响应式流API的构建基础：

• 发布者是事件的发送方，可以向它订阅。
• 订阅者是事件订阅方。
• 订阅将发布者和订阅者联系起来，使订阅者可以向发布者发送信号。

响应式编程就是：就是异步数据流编程

constructor() {
    /** * 被观察者可以做三件事 * 1，发射下一个元素，这个元素可以是任何东西。数组，事件，变量。。。 * 2.流可以抛一个异常 * 3.发射一个信号告诉观察者流已经结束 * Observable来自于rxjs包，这是JavaScript的一个响应式编程的包 * */
    //Observable是被观察的，被观察者
    Observable.from([1,2,3,4])//from方法用于创建一个流
      .filter(e=>e%2==0)//把偶数过滤出来
      .map(e=>e*e)//计算数字的平方
      .subscribe(//订阅这个流，接受并处理流中的对象。subscribe括号中的组合起来其观察者
        e=>console.log(e),//打印出这个流
        err=>console.error(err),//如果出错的话，打印出错误信息
        ()=>console.log("结束了")//结束之后执行这句话

      )

    /** * 相应的对于观察者可以定义三个方法来处理这三件事 * 第一个方法处理流中发出的元素 * 第二个方法处理流抛出的异常 * 第三个方法在流结束的时候被调用 * 后两个方法是可选的 */
  }

在浏览器中产生的每一个事件，在JavaScript中都会被封装成event对象

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

angular既可以处理标准的事件比如keyup，也可以创建和发射自定义的事件

一个事件的处理方法可以传递一个可选的$event参数来引用这个事件对象

如果一个事件对象是一个标准的DOM事件，那就可以调用这个事件对象的相关属性和方法来获取信息，比如

//获取用户的输入信息
 onKey(event){
    console.log(event.target.value);
 }

event的target属性指向发射事件的那个HTML元素，这里也就是input

还有一种模板本地变量的方式来可以来获得元素的相关信息

//myField就代表这个input标签
<input #myField (keyup)="onKey(myField.value)">

onKey(value:string){
    console.log(value);
 }

在传统的JavaScript中事件作为一次性的东西。触发一次，就调用一下。

但在Angular中事件作为一个永不结束的流来处理。

案例：现在有个搜素框，我输入东西后就开始进行搜索。我想搜索IBM，当我输入I的时候就会触发keyup事件去服务器搜索，当我输入IB的时候也会去服务器搜索。这不是我们想要的。我们想输入完IBM后去搜索。这里可以设置一个时间间隔，在这个时间间隔内没有再输入东西的时候就去服务器搜索。这个功能用传统的JavaScript实现起来比较麻烦。

现在用响应式编程的方式来实现。

修改app.module.ts，添加

import{FormsModule,ReactiveFormsModule} from '@angular/forms'

imports: [
    BrowserModule,FormsModule,ReactiveFormsModule
  ],

<input [formControl]="searchInput">

export class BindComponent implements OnInit {

  searchInput:FormControl =new FormControl();

  constructor() {
    this.searchInput.valueChanges
      .subscribe(stockCode=>this.getStockInfo(stockCode));//stockCode就是用户输入的值

  }

  getStockInfo(value:string){
    console.log(value);
  }

  ngOnInit() {
  }

}

当搜索框中的值改变时，就会在控制台打印出来。

import {Component,OnInit} from '@angular/core';
import {Observable} from "rxjs";
import{FormControl} from '@angular/forms'
import 'rxjs/Rx'

@Component({
  selector: 'app-bind',templateUrl: './bind.component.html',styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {

  searchInput:FormControl =new FormControl();

  constructor() {
    this.searchInput.valueChanges
      .debounceTime(500)//设置为500毫秒
      .subscribe(stockCode=>this.getStockInfo(stockCode));

  }

  getStockInfo(value:string){
    console.log(value);
  }

  ngOnInit() {
  }

}

这样当输入字符后不会马上去打印，而是会在500毫秒内没有再输入新东西时才会去打印。

万物都可以用流来处理。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!