盡快訂閱第二個 observable，但等待第一個發出 - Angular / RxJS

Question

我的情況是，我想盡快訂閱兩個不同的 observable，但要等待第一個在第二個發出之前發出。

例如，我正在開發一個聊天應用程序，我想在其中檢索存儲在數據庫中的所有以前的消息，但還要訂閱一個發出新消息的 stream。

我想要這樣的東西：

readonly messages$ = this.service.getStoredMessages().pipe(
    switchMapTo(this.service.getNewMessages())
)

這樣做的問題是，由於對getNewMessages()的訂閱較晚，我可能會錯過一些消息。 我需要做的是盡快訂閱這兩個 observables，但第二個（ getNewMessages() ）應該只在getStoredMessages()發出后發出。

Answer 1

假如說：

• storedMessges$類型是Observable<Message[]>
• getMessages$類型是Observable<Message>
• 並且該messages$類型應該是Observable<Message>

我認為你是你想要做的事情或多或少是這樣的：

readonly messages$ = defer(() => {
  const storedMessages$ = this.service.getStoredMessages().pipe(share())
  const newMessages$ = this.service.getNewMessages().pipe(share())

  const missedMessages$ = newMessages$.pipe(
    takeUntil(storedMessages$),
    toArray(),
  )

  const initialMessages$ = merge(
    storedMessages$,
    missedMessages$
  ).pipe(mergeAll()) // instead of `mergeAll` maybe you want to `scan` and make sure that there are no duplicate values...

  return merge(
    newMessages$.pipe(ignoreElements()), // it ensures that we don't unbscribe from newMessages$ after storedmessages$ emits/completes.
    concat(initialMessages$, newMessages$),
  )
})

Answer 2

您可以使用這種結構：

readonly messages$ = this.service.getStoredMessages().pipe(
    withLatestFrom(this.service.getNewMessages())
)

Answer 3

你可以試試這個：

readonly messages$ = this.service.getStoredMessages().subscribe(
              res => {
                      this.service.getNewMessages()
                     })

Answer 4

從您的問題中，我了解到您想在視圖中使用一系列消息。

我們稱之為viewMessages 。 現在，如果我們要將消息推入viewMessages ，我建議訂閱兩個流的流，即先前消息的ZF7B44CFAFD5C52222222222222222222E7BZ和ZF7B44CFAFD5CFAFD5CFAFD5CFAFD5CFAFD5CFAFD2222222222222223D5498196C8A2E7BZ的任何Prep151515 Hews Meass Meads Meadsembz和em emciits的viewMessages 。

viewMessages:Message[] = [];
.
.
.
this.getStoredMessages().subscribe(messages=>{
    const chatMessages = this.viewMessages;
    this.viewMessages = [].concat(messages, chatMessages);
});
this.getNewMessage().subscribe(message=>{
    const existingMessages = this.viewMessages;
    this.viewMessages = [].concat(existingMessages, message);
});

請不要在兩個訂閱中都保持順序。 以前的消息將首先出現，新消息將在之后出現。