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

àì夳堔傛蜴生んèń 2022-06-06 05:41 178阅读 0赞

![这里写图片描述][SouthEast]

*  可观察者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对象

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
      ],

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毫秒内没有再输入新东西时才会去打印。

万物都可以用流来处理。

[SouthEast]: /images/20220606/a2f816effc5b4f069c6ac80295c91ef8.png