rxjs操作符-switchMap

switchMap和其他转换操作符的主要区别是它具有取消效果。在每次发出时,会取消前一个内部observable(你所提供函数的结果)的订阅,然后订阅一个新的observable。可以通过短语切换成一个新的observable来记忆它。

将每个源投射成Observable,该Observable会合并输出到Observable中,并且只发出最新投射的Observable中的值。

将每个值映射成Observable,然后使用switch打平所有的内部Observable。

返回的Observable基于应用的一个函数来发送项,该函数提供给源Observable发出的每个项,并返回一个(所谓的“内部)Observable。每次观察到这些内部Observable的其中一个时,输出Observable将开始发出该内部Observable所发出的项。当发出一个新的内部Observable时,switchMap会停止发出先前发出的内部Observable并开始发出新的内部Observable的值。后续的内部Observable也是如此。

例如,点击按钮就重新泛起一个interval:

1
2
3
4
5
6
7
const source = fromEvent(this.submitBtn.nativeElement, 'click');
const example = source.pipe(
switchMap(val => interval(1000))
).subscribe(res => {
console.log('res', res);
});
// 每次点击的时候激活一个新的interval。重复点击时放弃上一个interval新起一个interval。

例如,从url中接受参数以复用这个页面:

1
2
3
4
5
this.activatedRoute.paramMap.pipe(
switchMap((params: ParamMap) => of(params.get('id')))
).subscribe(data => {
console.log(data);
});

写一个测试函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
constructor(
private activatedRoute: ActivatedRoute,
private router: Router,
) {
}

ngOnInit() {
this.activatedRoute.paramMap.pipe(
switchMap((params: ParamMap) => of(params.get('id')))
).subscribe(data => {
console.log(data);
});
}

changeUrl() {
this.router.navigate(['/r/switch-map', {id: Math.floor(Math.random() * 100)}]);
}

这样,url变化的时候,接收到的url里面的参数id都会是最新的。

这里of操作符是创建简单的Observable,该Observable只发出给定的参数,在发送完这些参数后发出完成通知。

可以尝试下,不加of操作符的时候监听paramMap时,对应的参数有多长,就会在subscribe里输出多少次,这明显不合理的,加上of操作符后,就可以打平paramMap这个Observable.

有钱的捧个钱场,没钱的捧个人场~