看下面這段代碼：

getSupportedDeliveryModes(): Observable<DeliveryMode[]> {return this.checkoutStore.pipe(select(CheckoutSelectors.getSupportedDeliveryModes),withLatestFrom(this.checkoutStore.pipe(select(getProcessStateFactory(SET_SUPPORTED_DELIVERY_MODE_PROCESS_ID)))),tap(([, loadingState]) => {if (!(loadingState.loading || loadingState.success || loadingState.error)) {this.loadSupportedDeliveryModes();}}),pluck(0),shareReplay({ bufferSize: 1, refCount: true }));}

調用 withLatestFrom 的 Observable 對象，起到主導數據產生給下游觀察者的作用。作為參數被調用的 Observable 對象只能貢獻新的數據，而不能控制數據的產生時機。

換句話說，上述 Spartacus 的例子，CheckoutSelectors.getSupportedDeliveryModes Observable 對象是向下游產生數據的主導者，而 select(getProcessStateFactory(SET_SUPPORTED_DELIVERY_MODE_PROCESS_ID 只是數據片段的貢獻者。

下圖第 54 行的語法是元祖，元祖也是數組，但各個元素的數據類型不一定必須相同。

第 54 行的 loadingState，代表的就是從 ngrx store 里取出的 setDeliveryModeProcess 的狀態。第 55 行的語義是，如果狀態是 loading 或者 成功，或者是 error ，則不做任何事情，否則調用 58 行的 loadSupportedDeliveryModes, 進行 mode 的加載。

這里我們巧妙的使用了 withLatestFrom, 將 delivery mode 的加載狀態，引入到 getSupportedDeliveryModes 的交互之中。

再看另一個例子：

protected buildRestoreSavedCartEvents<T>(mapping: ActionToEventMapping<T>): () => void {const eventStream$ = this.getAction(mapping.action).pipe(switchMap((action) =>of(action).pipe(withLatestFrom(this.multiCartService.getCart(action.payload.cartId)))),map(([action, cart]) =>createFrom(mapping.event as Type<T>, {...action.payload,cartCode: cart.code,saveCartName: cart.name,saveCartDescription: cart.description,...(cart.saveTime && { saveTime: cart.saveTime }),})));

這里調用 withLatestFrom 的 Observable 對象的類型為 Action，包含一個類型為 string 的字段 type 和類型為 any 的 payload 字段。

貢獻數據即傳入 withLatestFrom 操作符函數的輸入參數，類型為 146 行 this.multiCartService.getCart 的返回參數，類型為 Cart，如下圖所示：

因此，在 pipe 操作符下游即 149 行代碼里，map 的輸入參數為元祖：[ action, cart], 兩個元素的數據類型分別為：

以及：

值得一說的是，combineLatest 和 withLatestFrom 有本質的區別。在前者的調用里，所有參與運算的 Observable 地位都是均等的，只要有任意一個發生變化，combineLatest 都會從所有的輸入 Observable 對象中拿出最后一次產生的數據，組合成數組的數據類型，傳遞給下游。

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

總結

以上是生活随笔為你收集整理的RxJs 操作符 withLatestFrom 在 SAP 电商云 Spartacus UI 中的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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