在 Storefront AppModule 建構函式里注入 ActiveCartService：

```typescript
private cartService: ActiveCartService,
```

![](https://img-blog.csdnimg.cn/img_convert/300d0039f91e4d0ea53f67b1e97817e8.png)
呼叫其 API：
```typescript
const loading$ = this.cartService.getLoading();
    
    loading$.subscribe((data) => console.log('Jerry cart loading? ', data));
```

列印出的日誌：
![](https://img-blog.csdnimg.cn/img_convert/d36fe86a5bbc591c2af52e7c64ecbf2a.png)

active-cart.service.d.ts 裡，僅僅包含方法的引數定義：

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

如果要檢視其實現程式碼，還是得去 fesm2015 的 Spartacus-core.js 檔案裡檢視：

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

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

```typescript
getLoading(): Observable<boolean> {
    return this.cartSelector$.pipe(
      map((cartEntity) => cartEntity.loading),
      distinctUntilChanged()
    );
  }
```

檢視 this.cartSelector$ 的實現：

```typescript
// Stream with active cart entity
  protected cartSelector$ = this.activeCartId$.pipe(
    switchMap((cartId) => this.multiCartService.getCartEntity(cartId))
  );
```

cartSelector$ 的賦值邏輯：從 activeCartId$ 裡取出 cartId，呼叫 multiCartService 讀取。

MultiCartService 也只是從 store 裡透過selector 去讀取。

ActiveCartId$ 的賦值邏輯：

```typescript
// This stream is used for referencing carts in API calls.
  protected activeCartId$ = this.userIdService.getUserId().pipe(
    // We want to wait with initialization of cartId until we have userId initialized
    // We have take(1) to not trigger this stream, when userId changes.
    take(1),
    switchMapTo(this.store),
    select(MultiCartSelectors.getActiveCartId),
    // We also wait until we initialize cart from localStorage. Before that happens cartId in store === null
    filter((cartId) => cartId !== activeCartInitialState),
    map((cartId) => {
      if (cartId === '') {
        // We fallback to current when we don't have particular cart id -> cartId === '', because that's how you reference latest user cart.
        return OCC_CART_ID_CURRENT;
      }
      return cartId;
    })
  );
```

在這個檔案處加上一行列印語句：
![](https://img-blog.csdnimg.cn/img_convert/feb5dd3672ed7a86c102bbdeaab5ad93.png)

果然看到這條語句了：
![](https://img-blog.csdnimg.cn/img_convert/2cc531d69dc956d3fc7c21c926c8df8e.png)

為什麼初始的 loading 標誌位為 true？

透過除錯程式碼得知：
![](https://img-blog.csdnimg.cn/img_convert/63535d509f567bdf106f0cf6499e2b18.png)

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

這個 LoadCart 繼承了 EntityLoadAction，所以也繼承了預設的 load：true 標誌位。

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

那麼什麼時候又變成 false 呢？

呼叫棧看完了都沒看到有 Spartacus 相關的程式碼：
![](https://img-blog.csdnimg.cn/img_convert/3f7d7089e4ff452829967d8cde206a22.png)

只知道肯定發生在 Load Cart Success 之後。

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

從 map.js 裡看到了線索：這個 value 裡包含了購物車 cart 的業務資料：
![](https://img-blog.csdnimg.cn/img_convert/06405c010c99538d23b886e489b2cbf7.png)

以及 loading：false

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

這是我們的應用程式碼：
![](https://img-blog.csdnimg.cn/img_convert/e0922f4b40a429fab93417eac2a0541a.png)

從 Cart selector 裡取出 CartEntity，呼叫 map，將 loading 欄位對映出來：
![](https://img-blog.csdnimg.cn/img_convert/7a4ea0a647fdb710c8aecd52e29a53be.png)

Cart 資料結構：
![](https://img-blog.csdnimg.cn/img_convert/3633d16e1b6ed31ed02356a9e631a895.png)

從這裡也能說明，一定是 Load Cart Success 觸發的第二次 loading 列印：
![](https://img-blog.csdnimg.cn/img_convert/76b047d5393a09387cda49d97082dbba.png)

此時 cart 資料已經回來了，loading 為 false：
![](https://img-blog.csdnimg.cn/img_convert/f48186c7e22476b0dc751c5088865600.png)</boolean>

如何獲取 SAP Commerce Cloud Spartacus UI 購物車 Cart 的載入狀態

相關文章