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

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

該函式從給定的 innerObservable 發出專案，並且僅從最近投影的內部 Observable 中獲取值。

看個例子：

```typescript
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));

```
輸出：
![](https://img-blog.csdnimg.cn/img_convert/18399c6185cc56737307496a183c2359.png)

每次點選之後，click$ 丟擲的 PointerEvent，被 switchMapTo 返回的 Function Operator 丟棄了。最後使用者訂閱 result 函式裡，列印的值，是 switchMapTo 輸入的 interval(1000) Observable 發射的值，而不再是 clicks$ 丟擲的 PointerEvent.

![](https://img-blog.csdnimg.cn/img_convert/037c0e49fa3676e65d31807df89f7662.png)

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

```typescript
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 時停止。

![](https://img-blog.csdnimg.cn/img_convert/01a806da2976f0abe689a9c81831547f.png)

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

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

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

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

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

RxJs SwitchMapTo 操作符之移花接木

相關文章