Angular18 RXJS

1 RX

　　全称是 Reactive Extensions，它是微软开发并维护的基于 Reactive Programming 范式实现的一套工具库集合；RX结合了观察者模式、迭代器模式、函数式编程来管理事件序列

　　RX官方文档：点击前往　　

2 RXJS

　　RXJS就是RX在JavaScript层面上的实现；RxJS 是一个库，它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable，附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等)，这些数组操作符可以把异步事件作为集合来处理。

　　RXJS官方文档：点击前往

3 RXJS中解决异步事件管理的一些基本概念

　　3.1 Observable

　　　　可观察对象：表示一个可调用的未来值或者事件的集合

　　　　官方文档：点击前往

　　3.2 Observer

　　　　观察者对象：一个回调函数集合，它知道怎么去监听被可观察对象Observable发送的值

　　　　官方文档：点击前往

　　3.3 Subscription

　　　　订阅：表示一个可观察对象Observable的执行，主要用于取消可观察对象Observable执行

　　　　官方文档：点击前往

　　3.4 Operators

　　　　操作符：就是一些义函数式编程来处理可观察对象Observable，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。

　　　　官方文档：点击前往

　　3.5 Subject

　　　　相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。

　　　　官方文档：点击前往　　

　　3.6 Schedulers

　　　　用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

　　　　官方文档：点击前往

4 简单实例

　　技巧01：利用 jsbin 这个在线的JS编辑器作为测试编辑器，连接地址 -> 点击前往

　　技巧02：本博文使用JS版本都是ES6

　　4.1 单击按钮实例

　　　　4.1.1 在HTML中通过script标签引入RXJS库　

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

　　　　4.1.2 在HTML中添加一个button标签　　　

<button id="btn" >单击查看效果</button>

　　　　4.1.2 通过JS实现RXJS编程　　　

const btn = document.getElementById('btn');
const btn$ = Rx.Observable.fromEvent(btn, 'click');
btn$.subscribe(value => console.log('你点击了按钮哟'));

　　　　代码解释：

　　　　　　第一行：获取ID为“btn”的DOM节点

　　　　　　第二行：将获取到的DOM节点的单机事件添加到一个可观察对象Observable的序列中

　　　　　　第三行：订阅可观察对象Observable，当对应DOM节点的单机事件被触发时就会执行相应的操作（本实例是打印出一些信息）

　　　　4.1.3 效果展示

　　　　4.1.4 代码汇总

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
</head>
<body><button id="btn" >单击查看效果</button><script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>

HTML

const btn = document.getElementById('btn');
const btn$ = Rx.Observable.fromEvent(btn, 'click');
btn$.subscribe(value => console.log('你点击了按钮哟'));

ES6

　　4.2 文本框输入实例

　　　　4.2.1 在HTML中通过script标签引入RXJS库　　　　

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

　　　　4.2.2 在HTML中添加一个input标签　

<input id="test" type="text" placeholder="请输入一些信息" />

　　　　4.2.3 通过JS实现RXJS编程　　

const test = document.getElementById('test');
const test$ = Rx.Observable.fromEvent(test, 'keyup').debounceTime(500).pluck('target', 'value');
test$.subscribe(value => console.log(value));

　　　　　　代码解释：

　　　　　　　　fromEvent -> 将DOM节点的keyup事件添加到可观察对象Observable中

　　　　　　　　debounceTime -> DOM节点的keyup事件触发后0.5秒后才推送

　　　　　　　　pluck -> 获取触发事件DOM节点的value值

　　　　4.2.4 效果展示

　　　　4.2.5 代码汇总　　　　　

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
</head>
<body><input id="test" type="text" placeholder="请输入一些信息" /><script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>

HTML

const test = document.getElementById('test');
const test$ = Rx.Observable.fromEvent(test, 'keyup').debounceTime(500).pluck('target', 'value');
test$.subscribe(value => console.log(value));

ES6

5 弹珠图

　　要解释操作符是如何工作的，文字描述通常是不足以描述清楚的。许多操作符都是跟时间相关的，它们可能会以不同的方式延迟(delay)、取样(sample)、节流(throttle)或去抖动值(debonce)。图表通常是更适合的工具。弹珠图是操作符运行方式的视觉表示，其中包含输入 Obserable(s) (输入可能是多个 Observable )、操作符及其参数和输出 Observable 。

6 可观察对象Observable

　　技巧01：可观察对象Observable是数据的产生者，它会将数据以流的方式推送给观察者Observer；可以将可观察对象Observable看作是一个可以同步、异步返回多个值的函数

const test$ = Rx.Observable.create(observer => {observer.next(1);observer.next(2);    observer.next(3);setTimeout(() => observer.next('一秒钟后异步推送的数据'), 1000);setTimeout(() => {observer.next('2秒钟后异步推送的数据');observer.complete();}, 2000);});

　　　　代码解释：上面的代码中利用create操作符创建了一个Observable，该Observable一旦被订阅就会向Observer推送1、2、3，然后1秒钟后推送“一秒钟后异步推送的数据”，再过1秒钟后推送“2秒钟后异步推送的数据”，紧接着是完成数据流的推送

　　技巧02：订阅Observable是Observable执行和发送值/事件给Observer最简单的方式；订阅Observable就类似于调用一个拥有多个返回值的函数

const test$Sub = test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('数据推送完成')                        );

　　　　代码解释：上面的代码是订阅Observable的一个实例test$，订阅方法subscribe中的参数是有顺序的，其中第一个参数是位置参数用于处理数据，第二三个参数是可选参数，其中第二个参数用来处理错误，第三个参数用来处理数据推送完成后的一些操作；订阅后会返回一个Subscription对象，可以通过该对象来关闭正在执行的Observable

　　技巧03：利用Subscription对象来关闭正在执行的Observable

const test$ = Rx.Observable.create(observer => {
//                    const t =  setInterval(() => observer.next('hello'), 1000);observer.next(1);observer.next(2);    observer.next(3);const st01 = setTimeout(() => observer.next('一秒钟后异步推送的数据'), 1000);const st02 = setTimeout(() => {observer.next('2秒钟后异步推送的数据');observer.complete();}, 2000);return function unsubscribe() {clearTimeout(st01);clearTimeout(st02);
//                       clearInterval(t);
                    }});
const test$Sub = test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('数据推送完成')                        );
setInterval(() => test$Sub.unsubscribe(), 1000);
// test$Sub.unsubscribe();

　　　　代码解释：使用create创建Observable的时候回返回一个函数unsubscribe，该函数用来定义如何清理执行的资源；订阅该Observable后就会返回一个Subscription对象，通过该Subscription对象来调用unsubscribe方法来取消正在执行的Observable

7 观察者Observer

　　Observer是Observable推送的值的消费者；Observer是一组回调函数的集合，每个回调函数对应一种 Observable 发送的通知类型：next、error 和 complete。下面的示例是一个典型的观察者对象：

var observer = {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'),
};

　　技巧01：使用Observer就必须将他们提供给Observable的subscirbe方法

　　坑01：虽然所Observer是一个对象，但是在将Observer传给Observable的subscribe方法时只需要将对象中的内容传进去就可以啦，例如下面第一种方式就是错误的，第二种方式才是正确的

test$.subscribe({value => console.log(value),error => console.log(error),() => console.log('数据推送完成')   }                     );

错误的使用方法

test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('数据推送完成')                        );

8 操作符

　　操作符是 Observable 类型上的方法，比如 .map(...)、.filter(...)、.merge(...)，等等。当操作符被调用时，它们不会改变已经存在的 Observable 实例。相反，它们返回一个新的 Observable ，它的 subscription 逻辑基于第一个 Observable。（操作符是函数，它基于当前的 Observable 创建一个新的 Observable。这是一个无副作用的操作：前面的 Observable 保持不变）

　　操作符本质上是一个纯函数 (pure function)，它接收一个 Observable 作为输入，并生成一个新的 Observable 作为输出。订阅输出 Observalbe 同样会订阅输入 Observable 。

　　8.1 小案例之mapTo

　　　　每次源 Observble 发出值时，都在输出 Observable 上发出给定的常量值；接收常量 value 作为参数，并每当源 Observable 发出值时都发出这个值。换句话说，就是忽略实际的源值，然后简单地使用这个发送时间点以知道何时发出给定的 value 。

　　　　8.1.1 效果展示

　　　　8.1.2 代码汇总　　

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
</head>
<body><button id="btn" type="button">点击测试</button><script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>

HTML

// 根据ID获取DOM对象
const btn = document.getElementById("btn");// 将对应DOM对象的单击事件变成事件流
const btn$ = Rx.Observable.fromEvent(btn, "click").mapTo('ello');// 订阅事件流
btn$.subscribe(value => console.log(value));

ES6

　　8.2 创建类操作符

　　　　8.2.1 interval

public static interval(period: number, scheduler: Scheduler): Observable

　　　　　　创建一个 Observable ，该 Observable 使用指定的 IScheduler ，并以指定时间间隔发出连续的数字。

　　　　　　坑01：interval产生的第一个数并不是立即就产生的，而是当第一个时间间隔过后才会推送第一个数字，而且推送的数字是从0开始的自增数字

const test$ = Rx.Observable.interval(1000);
test$.subscribe(value => console.log(value));

　　　　　　技巧01：官方文档 => 点击前往

　　　　8.2.2 timer

public static timer(initialDelay: number | Date, period: number, scheduler: Scheduler): Observable

　　　　　　根据给定的时间间隔自增的产生数字

　　　　　　参数解释：

　　　　　　　　参数01：产生第一个数字的间隔时间

　　　　　　　　参数02：产生下一个数字的时间间隔（可选）

　　　　　　　　参数03：调度器，用来调度值的发送, 提供“时间”的概念 (可选，默认值: async)

　　　　　　坑01：如果只给定第一个参数，那么会在时间间隔到达后推送数字0，然后就不在继续推送数据啦

　　　　　　技巧01：其实timer的用法和interval非常想，都是自动产生自动的数字

const test$ = Rx.Observable.timer(1000, 1000).take(3).map(value => value * 10);
test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　8.3 合并类操作符

　　　　8.3.1 combineLatest

　　　　　　组合多个 Observables 来创建一个 Observable ，该 Observable 的值根据每个输入 Observable 的最新值计算得出的；组合多个 Observables 来创建一个 Observable ，该 Observable 的值根据每个输入 Observable 的最新值计算得出的。

　　　　　　技巧01：每个Observables都必须有值，而且他们其中必须有一个的值更新后才会执行combineLatest

　　　　　　》效果展示

　　　　　　》代码汇总

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
</head>
<body><input type="number" id="weight" placeholder="请输入体重" /><span>Kg</span><br /><input type="number" id="height" placeholder="请输入身高" /><span>cm</span><script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>

HTML

const weight = document.getElementById('weight');
const height = document.getElementById('height');const weight$ = Rx.Observable.fromEvent(weight, 'keyup').debounceTime(500).pluck('target', 'value');
const height$ = Rx.Observable.fromEvent(height, 'keyup').debounceTime(500).pluck('target', 'value');const bmi$ = Rx.Observable.combineLatest(weight$, height$, (w, h) => {const str = '成人BMI数值为：';const bmi = w / (h * h / 100 / 100);if (bmi < 18.5) {return str + bmi + ' -> 过轻';} else {if (bmi < 23.9) {return str + bmi + ' -> 正常';} else {if (bmi < 27) {return str + bmi + ' -> 过重';} else {if (bmi < 32) {return str + bmi + ' -> 肥胖';} else {return str + bmi + ' -> 非常肥胖';}}}}});// 过轻：低于18.5
// 正常：18.5-23.9
// 过重：24-27
// 肥胖：28-32
// 非常肥胖, 高于32
// weight$.subscribe(value => console.log(value));
// height$.subscribe(value => console.log(value));
bmi$.subscribe(value => console.log(value));

ES6

　　　　8.3.2 merge

public merge(other: ObservableInput, concurrent: number, scheduler: Scheduler): Observable

　　　　　　将两个数据源的数据合并到一起

const test01$ = Rx.Observable.create(observer => {observer.next(1);setTimeout(() => {observer.next(2);}, 1000);observer.next(3);});
const test02$ = Rx.Observable.create(observer => {observer.next(4);observer.next(5);observer.next(6);});
const test$ = Rx.Observable.merge(test01$, test02$);test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

View Code

　　　　8.3.3 startWith

public startWith(values: ...T, scheduler: Scheduler): Observable

　　　　　　向原数据源添加一个数据作为第一个推送的数据

const test01$ = Rx.Observable.create(observer => {observer.next(1);setTimeout(() => {observer.next(2);}, 1000);observer.next(3);}).startWith('HELLO');test01$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

View Code

　　　　8.3.4 zip

　　　　　　根据顺序将两个数据源中的数据进行组合

　　　　　　技巧01：如果一个数据源中有3个数据，另外一个数据源中有4个数据，那么只会将这两个数据源中前面推送的3个数据进行组合

const test01$ = Rx.Observable.create(observer => {observer.next(1);setTimeout(() => {observer.next(2);}, 1000);observer.next(3);});
const test02$ = Rx.Observable.create(observer => {observer.next('a');observer.next('b');observer.next('c');observer.next('d');});const test$ = Rx.Observable.zip(test01$, test02$);test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　8.4 其他操作符

　　　　8.4.1 take

public take(count: number): Observable<T>

　　　　　　只会推送原数据流中前面的count个数据　　　　　　

const test$ = Rx.Observable.interval(1000).take(3);
test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

　　　　8.4.2 map

public map(project: function(value: T, index: number): R, thisArg: any): Observable<R>

　　　　　　对原数据源的每个值做同样的处理

const test$ = Rx.Observable.interval(1000).take(3).map(value => value * 10);
test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　　　8.4.3 filter　

public filter(predicate: function(value: T, index: number): boolean, thisArg: any): Observable

　　　　　　对原数据源的数据进行过滤

　　　　　　参数解释：

　　　　　　　　参数01：过滤操作函数，操作函数中第一个参数代表正在过滤的数据，第二个参数代表原数据源序列的索引（注意：索引是从0开始的，用处还问弄清楚）？？？

　　　　　　　　参数02：可选参数，用来决定 predicate 函数中的 this 的值

const test$ = Rx.Observable.timer(1000, 1000).take(5).map(value => value * 10).filter((value) => value > 10);
test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　　　8.4.4 first

public first(predicate: function(value: T, index: number, source: Observable<T>): boolean, resultSelector: function(value: T, index: number): R, defaultValue: R): Observable<T | R>

　　　　　　只推送原数据源中的第一个值或者第一个满足条件的值

　　　　　　技巧01：如果first不携带任何参数，那么将会推送原数据源中的第一个值(和take(1)的效果相同)；如果携带一个返回boolean的方法，那么将返回满足该方法的第一个数据

const test$ = Rx.Observable.timer(1000, 1000).take(5).map(value => value * 10)
//                 .first();.first((value) => value > 10);
test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　　　8.4.5 last　

public last(predicate: function): Observable

　　　　　　只推送原数据源中的最后一个数据

　　　　　　技巧01：如果last不指定参数时，就会默认只推送最后一个数据；如果指定了一个返回boolean类型的方法作为参数，那么就会返回最后一个满足条件的数据

const test$ = Rx.Observable.interval(1000).take(5).last();
//                 .last(value => value < 3 );

test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　　　8.4.6 skip　　

public skip(count: Number): Observable

　　　　　　在推送数据时，跳过前面count个数据

const test$ = Rx.Observable.interval(1000).take(5).skip(2);test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　　　8.4.7 scan

public scan(accumulator: function(acc: R, value: T, index: number): R, seed: T | R): Observable<R>

　　　　　　对原数据源序列进行依次累加，每累加玩完一次就会推送一个结果

　　　　　　参数解释：

　　　　　　　　参数01：一个累加方法，该方法的第一个参数代表累加结果，第二个参数代表当前累加值，该累加值随便用一个变量表示即可

　　　　　　　　参数02：可选参数，累加器的初始值，如果不填就会默认将原数据源的第一个数据作为初始累加值

const b = 100;
const test01$ = Rx.Observable.interval(1000).take(5).scan((acc, a) => acc + a, b);test01$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　　　8.4.8 reduce

public reduce(accumulator: function(acc: R, value: T, index: number): R, seed: R): Observable<R>

　　　　　　对原数据源中的数据进行累加，最后只将累加的结果推送

　　　　　　参数解释：

　　　　　　　　参数01：第一个参数是一个累加方法，该累加方法接受两个参数，第一个参数代表累加结果，第二个参数代表当前累加值

　　　　　　　　参数02：可选参数，该参数如果指定了就会被用作累加的初始值

const b = 100;
const test01$ = Rx.Observable.interval(1000).take(5).reduce((acc, a) => acc + a, b);test01$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　　　8.4.9 debounceTime

public debounceTime(dueTime: number, scheduler: Scheduler): Observable

　　　　　　当没有新的数据添加到原数据源时，延迟发送原数据源中的数据

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title>
</head>
<body><input type='text' id="test" placeholder="测试文本框" /><script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
</body>
</html>

HTML

const test = document.getElementById('test');
const test$ = Rx.Observable.fromEvent(test, 'keyup').debounceTime(500).pluck('target', 'value');test$.subscribe(value => console.log(value),error => console.log(error),() => console.log('完成'));

ES6

　　　　8.4.10 distinct

public distinct(keySelector: function, flushes: Observable): Observable

　　　　　　去除掉原数据源中重复的数据

　　　　　　技巧01：如果distinct方法提供了keySelector方法，就会先利用keySelector方法对原数据源你的数据进行处理后在进行去重操作

　　　　　　官方文档 => 点击前往

const test01$ = Rx.Observable.create(observer => {observer.next(1);observer.next(2);observer.next(3);observer.next(1);observer.next(2);observer.next(3);}).distinct();
test01$.subscribe(value => console.log(value));

ES6

　　　　8.4.11 distinctUntilChanged

public distinctUntilChanged(compare: function): Observable

　　　　　　去除掉原数据源相邻数据的重复数据

const test01$ = Rx.Observable.create(observer => {observer.next(1);observer.next(2);observer.next(3);observer.next(3);observer.next(3);observer.next(1);observer.next(2);observer.next(3);}).distinctUntilChanged();
test01$.subscribe(value => console.log(value));

ES6

转载于:https://www.cnblogs.com/NeverCtrl-C/p/8338265.html

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Apache Zeppelin源码结构分析
本文针对Zeppelin版本：v0.8.1 Github地址 https://github.com/apache/zeppelin Zeppelin主体由Java开发，使用Maven作为构建工具，语言组成如图所示： 其中，核心的Server、Zengine、Interpreter、Jupyter模块都由Java语言…...
2024/5/4 3:23:43
Angular中数组与字典循环写法
数组1、 for (const i in declareItems) {if (declareItems.hasOwnProperty(i)) {const index i；const declareItem declareItems[i];}}数组2、for (const item of declareItems) {contst declareItem item;}数值3、for (let i 0; i < declareItems.length; …...
2024/5/4 3:21:48
《CSS 揭秘》每章详细读书笔记
《CSS 揭秘》每章详细读书笔记 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eS4SupjZ-1589817256003)(https://raw.githubusercontent.com/lawler61/blog/master/css/css-jiemi-notes/images/logo.jpg)] 一、个人站点 www.freeze61.me 可直接复制 …...
2024/4/23 18:45:36
python列表元素去重_python,list_python 如何进行以下list 元素去重，python,list,去重 - phpStudy...
python 如何进行以下list 元素去重如何将以下list去重 url_list [ {path: [jy5, xhr, compose, init.do], host: cwebmail.mail.163.com, method: POST, query: [cType, sid]}, {path: [jy5, xhr, user, refresh.do], host: cwebmail.mail.163.com, method: POST, query: [si…...
2024/5/4 6:23:44
angular源码分析摘抄王大鹏博客 directive指令及系列
链接地址：http://www.cnblogs.com/web2-developer/p/angular-14.html $compile的功能：将一个html字符串或者一个DOM进行编译，返回一个链接函数。链接函数将作用域和模板链接在一起，编译的实质是遍历DOM树，匹配和处理DO…...
2024/5/3 23:05:06
全切式双眼皮恢复
...
2024/5/3 23:11:36
DWAPlannerROS源码分析
1 体系结构 （1）主要成员 base_local_planner::LocalPlannerUtil planner_util_; 用来存储运动控制参数以及costmap2d、tf等，会被传入dp_ costmap_2d::Costmap2DROS* costmap_ros_; base_local_planner::OdometryHelperRos odom_helper_; 用来…...
2024/4/21 5:44:30
Angular1.x启动分析
AngularJS的源码在整体上，与其他很多库和框架一样，是一个自执行函数，其整体结构简化如下： 匿名自执行函数，保证angular.js加载完成后，立即执行其中代码； eg： (function(window, do…...
2024/4/21 5:44:29
全切双眼皮两年以上
...
2024/4/21 5:44:29
Angular2 源码解读 - 自定义管道@Pipe
定义管道用于在模板中转换显示的内容案例 Pipe({name : addHero }) export class AddHeroPipe implements PipeTransform{transform(pre : string) {return pre is a Hero;} }详解 1. 使用Pipe注解通常情况下我们只需要用到name属性，对该自定义管道命名即可。在…...
2024/4/21 5:44:27
angular源码分析：angular中入境检察官$sce
2019独角兽企业重金招聘Python工程师标准>>> 一、ng-bing-html指令问题需求:我需要将一个变量$scope.x <a href"http://www.cnblogs.com/web2-developer/">王大鹏</a>绑定到angular的视图上,希望视图上显示的一个链接. 1.如果,我采用ng-bin…...
2024/4/21 5:44:27
重庆划双眼皮实铜雀台
...
2024/4/20 19:18:44
双眼皮开眼角几天消肿
...
2024/4/29 2:55:13
源码分析 @angular/cdk 之 Portal
angular/material 是 Angular 官方根据 Material Design 设计语言提供的 UI 库，开发人员在开发 UI 库时发现很多 UI 组件有着共同的逻辑，所以他们把这些共同逻辑抽出来单独做一个包 angular/cdk，这个包与 Material Design 设计语言无关&#…...
2024/5/1 21:06:17
AngularJS2.0 入门教程
1、打开系统命令窗口（默认目录是：C:\Users\***） 打开 “dos 命令窗口” 输入 “cmd” 回车，输入【D:】跳转到D盘根目录，输入【CD MyFile\Project\Angular】跳转到项目使用的目录 2、创建文件夹命令：mkdir a…...
2024/4/20 4:45:12
深圳做双眼皮哪种好
...
2024/4/21 5:44:25
AngularJS交互学习教程推荐
0.目录目录预览详述1 Learn Angular2 AngularJS入门教程感悟声明 1.预览急着赶时间，没有时间听我废话的同学，直接看今天推荐的两个AngularJS交互学习教程。 CodeCademy的LearnAngularJS Fenby的AngularJS入门教程 2.详述许多研究表明&#xf…...
2024/4/22 14:20:09
Cartographer源码分析（转载）
目录【common】 common/port.h： common/time.h common/fixed_ratio_sampler.h common/rate_timer.h common/histogram.h common/math.h common/make_unique.h common/mutex.h common/thread_pool.h common/blocking_queue.h 【transform】 transform/…...
2024/4/21 5:44:23
双眼皮可以开内眼角吗
...
2024/4/23 1:33:34
焊接双眼皮对比
...
2024/4/21 5:44:21

Angular18 RXJS

1 RX

2 RXJS

3 RXJS中解决异步事件管理的一些基本概念

3.1 Observable

3.2 Observer

3.3 Subscription

3.4 Operators

3.5 Subject

3.6 Schedulers

4 简单实例

4.1 单击按钮实例

4.1.1 在HTML中通过script标签引入RXJS库

4.1.2 在HTML中添加一个button标签

4.1.2 通过JS实现RXJS编程

4.1.3 效果展示

4.1.4 代码汇总

4.2 文本框输入实例

4.2.1 在HTML中通过script标签引入RXJS库

4.2.2 在HTML中添加一个input标签

4.2.3 通过JS实现RXJS编程

4.2.4 效果展示

4.2.5 代码汇总

5 弹珠图

6 可观察对象Observable

7 观察者Observer

8 操作符

8.1 小案例之mapTo

8.1.1 效果展示

8.1.2 代码汇总

8.2 创建类操作符

8.2.1 interval

8.2.2 timer

8.3 合并类操作符

8.3.1 combineLatest

8.3.2 merge

8.3.3 startWith

8.3.4 zip

8.4 其他操作符

8.4.1 take

8.4.2 map

8.4.3 filter

8.4.4 first

8.4.5 last

8.4.6 skip

8.4.7 scan

8.4.8 reduce

8.4.9 debounceTime

8.4.10 distinct

8.4.11 distinctUntilChanged

相关文章

最新文章

　　3.1 Observable

　　3.2 Observer

　　3.3 Subscription

　　3.4 Operators

　　3.5 Subject

　　3.6 Schedulers

　　4.1 单击按钮实例

　　　　4.1.1 在HTML中通过script标签引入RXJS库　

　　　　4.1.2 在HTML中添加一个button标签　　　

　　　　4.1.2 通过JS实现RXJS编程　　　

　　　　4.1.3 效果展示

　　　　4.1.4 代码汇总

　　4.2 文本框输入实例

　　　　4.2.1 在HTML中通过script标签引入RXJS库　　　　

　　　　4.2.2 在HTML中添加一个input标签　

　　　　4.2.3 通过JS实现RXJS编程　　

　　　　4.2.4 效果展示

　　　　4.2.5 代码汇总　　　　　

　　8.1 小案例之mapTo

　　　　8.1.1 效果展示

　　　　8.1.2 代码汇总　　

　　8.2 创建类操作符

　　　　8.2.1 interval

　　　　8.2.2 timer

　　8.3 合并类操作符

　　　　8.3.1 combineLatest

　　　　8.3.2 merge

　　　　8.3.3 startWith

　　　　8.3.4 zip

　　8.4 其他操作符

　　　　8.4.1 take

　　　　8.4.2 map

　　　　8.4.3 filter　

　　　　8.4.4 first

　　　　8.4.5 last　

　　　　8.4.6 skip　　

　　　　8.4.7 scan

　　　　8.4.8 reduce

　　　　8.4.9 debounceTime

　　　　8.4.10 distinct

　　　　8.4.11 distinctUntilChanged