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：

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中接受参数以复用这个页面：

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

写一个测试函数：

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.