先檢視登入按鈕的實現，選擇器為 cx-register

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

user-register.service.ts 裡，使用了 command 模式，注意 uid 裡的 `+`，並沒有進行任何處理。

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

command 最終投遞到 occ-user-profile.adapter.ts 檔案中的 register 方法裡，呼叫 Angular HTTP Library 的 post 方法進行投遞。注意上圖45 行程式碼，Content-Type 的值為 `application/json`.

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

Spartacus 事件服務提供了一個事件流，開發人員無需緊密整合到特定元件或模組即可使用這些事件流。事件系統在 Spartacus 中用於構建與第三方系統的整合，例如標籤管理器和 Web 跟蹤器。

事件服務還允許開發人員解耦某些元件。 例如，我們可能有一個分派事件的元件，以及另一個對該事件作出反應的元件，而無需元件之間的任何硬依賴。

事件服務利用 RxJs Observables 來驅動事件流。

事件由 TypeScript 類驅動，它們是給定事件的簽名並且可以被例項化。 下面是一個例子：

```typescript
import { CxEvent } from "@spartacus/core";
export class CartAddEntryEvent extends CxEvent {
  cartId: string;
  userId: string;
  productCode: string;
  quantity: number;
}
```
要觀察給定型別的事件，可以獲取事件型別的流，然後在需要時訂閱它。 以下是 CartAddEntryEvent 呼叫的示例：

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

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

如果開發人員需要的資料多於特定事件中包含的資料，則可以將此資料與其他流結合起來。 例如，我們可以從 facade 收集其他資料。

下面是一個響應 `新增到購物車事件` 的示例，然後等待購物車穩定（因為 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 }))
);
```

Spartacus 註冊和登入頁面的實現細節

相關文章