学习Angular中如何使用RxJS处理输入事件

作者：很楠不爱3 | 2024-03-12 07:09:40

踩

angular 监听@input

简介

RxJS是ReactiveX编程理念的JavaScript版本。ReactiveX来自微软，它是一种针对异步数据流的编程。简单来说，它将一切数据，包括HTTP请求，DOM事件或者普通数据等包装成流的形式，然后用强大丰富的操作符对流进行处理，使你能以同步编程的方式处理异步数据，并组合不同的操作符来轻松优雅的实现你所需要的功能。

RxJS 提供了一种对 Observable 类型的实现，直到 Observable 成为了 JavaScript 语言的一部分并且浏览器支持它之前，它都是必要的。这个库还提供了一些工具函数，用于创建和使用可观察对象。这些工具函数可用于：

把现有的异步代码转换成可观察对象
迭代流中的各个值
把这些值映射成其它类型
对流进行过滤
组合多个流

初级核心概念

Observable: 一系列值的生产者
Observer: 它是observable值的消费者
Operator: 可以在数据流的途中对值进行转换的操作符

Observables 作为被观察者，是一个值或事件的流集合；而 Observer 则作为观察者，根据 Observables 进行处理。

Observables 与 Observer 之间的订阅发布关系(观察者模式) 如下：

订阅：Observer 通过 Observable 提供的 subscribe() 方法订阅 Observable。
发布：Observable 通过回调 next 方法向 Observer 发布事件。

创建Observable

RxJS 中提供了很多操作符，用于创建 Observable 对象，常用的操作符如下：

of()，将普通JavaScript数据转为 Observable
from(), 把数组或iterable对象转换成Observable
create(), 返回一个可以在Observer上调用方法的Observable.
fromEvent(), 把event转换成Observable.
fromPromise(), 把Promise转换成Observable.
ajax(), 从ajax创建一个observable

of()


import { Component, OnInit } from '@angular/core';
import { Observable,of } from 'rxjs';
 
@Component({
  selector: 'app-observable',
  templateUrl: '
    <h2>使用of来创建可观察对象</h2>
    <div>
      <button (click)="getData()">Click here</button>
    </div>
  '
})
export class ObservableComponent implements OnInit {
  constructor() { }
 
  ngOnInit(): void {
  }
 
  getData() {
    // Create simple observable that emits three values
    const myObservable = of(1, 2, 3);
 
    // Create observer object
    const myObserver = {
      next: x => console.log('Observer got a next value: ' + x),
      error: err => console.error('Observer got an error: ' + err),
      complete: () => console.log('Observer got a complete notification'),
    };
 
    // Execute with the observer object
    myObservable.subscribe(myObserver);
  }
 
}

启动该项目，打开页面并点击按钮，出现这样的结果：

from()


import { Component, OnInit } from '@angular/core';
import { Observable,from } from 'rxjs';
 
@Component({
  selector: 'app-observable',
  templateUrl: '
    <h2>使用from函数创建可观察对象</h2>
    <div>
      <button (click)="fromData()">根据数组创建Observable</button>
    </div>
  '
})
export class ObservableComponent implements OnInit {
  constructor() { }
 
  ngOnInit(): void {
  }
 
  fromData() {
    let persons = [
      { name: 'Dave', age: 34, salary: 2000 },
      { name: 'Nick', age: 37, salary: 32000 },
      { name: 'Howie', age: 40, salary: 26000 },
      { name: 'Brian', age: 40, salary: 30000 },
      { name: 'Kevin', age:

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】