將每個源值投影到同一個 Observable，該 Observable 在輸出 Observable 中使用 switchMap 多次展平。

輸入一個 Observable，輸出一個 function Operator. 實際是一個函數，每次在源 Observable 上發出值時，該函數都會返回一個 新的 Observable.

該函數從給定的 innerObservable 發出項目，并且僅從最近投影的內部 Observable 中獲取值。

看個例子：

import { EMPTY, range } from 'rxjs'; import { first, take, tap } from 'rxjs/operators';import { fromEvent, interval } from 'rxjs'; import { switchMapTo } from 'rxjs/operators';const clicks = fromEvent(document, 'click');const test = event => console.log('Jerry: ', event); const result = clicks.pipe(tap(test),switchMapTo(interval(1000)) ); result.subscribe(x => console.log(x));

輸出：

每次點擊之后，click$ 拋出的 PointerEvent，被 switchMapTo 返回的 Function Operator 丟棄了。最后用戶訂閱 result 函數里，打印的值，是 switchMapTo 輸入的 interval(1000) Observable 發射的值，而不再是 clicks$ 拋出的 PointerEvent.

再看另一個在網頁顯示倒計時數字的例子。

import './style.css';import { interval, fromEvent } from 'rxjs'; import {switchMapTo,scan,startWith,takeWhile,finalize } from 'rxjs/operators';const COUNTDOWN_TIME = 10;// reference const countdownElem = document.getElementById('countdown');// streams const click$ = fromEvent(document, 'click'); const countdown$ = interval(2000).pipe(scan((acc, _) => --acc, COUNTDOWN_TIME),startWith(COUNTDOWN_TIME) );click$.pipe(switchMapTo(countdown$),takeWhile(val => val >= -10),finalize(() => (countdownElem.innerHTML = "We're done here!"))).subscribe((val: any) => (countdownElem.innerHTML = val));

初始整數是10，每隔2秒鐘減一，減到 -10 時停止。

思路：觸發計數器開始遞減的操作是點擊屏幕，因此需要使用 fromEvent 來構造 Observable ：click$

每隔兩秒鐘執行某項操作，因此需要用 interval 構造第二個 Observable.

一旦計數器啟動之后，每隔兩秒鐘需要執行遞減操作，因此需要用 switchMapTo，將 click$ 映射成 interval Observable.

之后的值傳遞，就和 click$ 再無任何關聯了。

因為是遞減操作，暗示這是一個 stateful 場景，故選用 scan 操作符維護內部狀態。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的RxJs SwitchMapTo 操作符之移花接木的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。