RxJS-Observable在首次調用時未使用.next（）發出值

Question

我在RxJS方面有點掙扎。 我有3個可觀察值。 First Observable在單擊文檔時發出一個值，並立即完成（有意地）。 Second Observable偵聽first $ Observable並映射這些值。 最后，第三個Observable與first $發出的最后一個元素合並second $ Observable。

通過查看代碼，更容易理解它：

const somethingHappened = true;

const first$ = Observable.create(observer => {
  document.addEventListener('click', e => {
    console.log('document clicked!')
    if (somethingHappened) {
      observer.next(5)
      observer.complete()
    } else {
      observer.next(5)
    }
  })
})

const second$ = first$.pipe(
  map((a: number) => a * 10),
)

const third$ = second$.pipe(
  concat(first$.pipe(last(), map(element => console.log('last element:', element)))),
)

third$.subscribe()

演示： https : //stackblitz.com/edit/typescript-apcjsh （單擊文檔並查看控制台）

實際上發生的事情真的很有趣。 第一次單擊該文檔后，我希望可以完成Third $ observable，因此應該觸發console.log('last element:', element) 。 相反，僅會觸發console.log('document clicked!') ！

下次單擊文檔console.log('document clicked!')會觸發兩次， console.log('last element:', element)會觸發一次。

有人可以向我解釋那里發生了什么嗎？

Answer 1

第一次單擊該文檔后，我希望可以完成可觀察到的third$

為了完成third$ ， second$和concat()所有參數都需要完成。 concat()的參數：

first$.pipe(last(), map(element => console.log('last element:', element)))

是全新的Observable，僅在second$完成后才能訂閱-因此您最終在文檔上安裝了第二個單擊處理程序。

如果將一些日志記錄輸出添加到Observable函數中：

const first$ = Observable.create(observer => {
    console.log('subscribed', Date.now()); // Add this
    document.addEventListener('click', e => {
      ...

您將看到兩條日志“已訂閱”消息。 一次在頁面加載時（調用$third.subscribe()之后），並且在第一次單擊文檔后再次調用（ concat()訂閱其參數時）。