Spartacus 事件服務提供了一個事件流，開發人員可以在不與特定元件或模組緊密整合的情況下使用它。在Spartacus中，事件系統用於構建與第三方系統的整合，如標籤管理器(Tag Management)和網路跟蹤器。

從 `event.service.ts` 檔案中匯入 `EventService`：

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

事件服務還允許開發人員解耦某些元件。例如，可能有一個分派事件的元件，即事件的產生者，和另一個響應此事件的元件，即事件的監聽者。

二者之間不需要有任何硬依賴關係。

事件是由TypeScript類驅動的，TypeScript類是給定事件的簽名，可以例項化。示例如下:

```typescript
import { CxEvent } from "@spartacus/core";
export class CartAddEntryEvent extends CxEvent {
  cartId: string;
  userId: string;
  productCode: string;
  quantity: number;
}
```

下圖是另一個 `LanguageSetEvent`，繼承自 `CxEvent`，在此基礎上增添了 `activeLanguage` 屬性：

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

如何監聽一個事件？

要觀察給定型別的事件，可以獲取事件型別的流，然後在需要的時候訂閱它。下面是一個 CartAddEntryEvent 監聽的例子:

```typescript
constructor(events: EventService){}
/* ... */

const result$ = this.events.get(CartAddEntrySuccessEvent);
result$.subscribe((event) => console.log(event));
```

如果需要位元定事件中包含的資料更多的資料，您可以將該資料與其他流(`stream`)組合。例如，可以從 Spartacus facade 收集額外的資料。

下面是一個響應“新增到購物車事件”的例子，然後等待購物車處於 stable 狀態(因為 OCC購物車需要從後端重新載入)，然後將所有的購物車資料附加到事件中的資料:

```typescript
constructor(
    events: EventService,
    cartService: ActiveCartService
    ){}
/* ... */

const result$ = this.events.get(CartAddEntrySuccessEvent).pipe(
    // When the above event is captured, wait for the cart to be stable
    // (because OCC reloads the cart after any cart operation)...
    switchMap((event) =>
        this.cartService.isStable().pipe(filter(Boolean), mapTo(event))
    ),
    // Merge the state snapshot of the cart with the data from the event:
    withLatestFrom(this.cartService.getActive()),
    map(([event, cart]) => ({ ...event, cart }))
);
```

上述程式碼的關鍵點：

- switchMap 需要返回一個 Observable 物件。

- 透過 filter 保證 Cart 處於 Stable 時再進行後續處理。

- mapTo event 丟棄了 Cart Stable 狀態，重新對映回 event 物件

- withLatestFrom：從 cartService 讀取 Stable 的 Cart 資料，此時透過前面的 filter 操作，能保證 Cart 一定已經 Stable 了。

SAP 電商雲 Spartacus UI Event Service 實現明細介紹

相關文章