共计 1485 个字符,预计需要花费 4 分钟才能阅读完成。
Spartacus 事件服务提供了一个事件流,开发人员能够在不与特定组件或模块严密集成的状况下应用它。在 Spartacus 中,事件零碎用于构建与第三方零碎的集成,如标签管理器 (Tag Management) 和网络跟踪器。
从 event.service.ts
文件中导入 EventService
:
事件服务还容许开发人员解耦某些组件。例如,可能有一个分派事件的组件,即事件的产生者,和另一个响应此事件的组件,即事件的监听者。
二者之间不须要有任何硬依赖关系。
事件是由 TypeScript 类驱动的,TypeScript 类是给定事件的签名,能够实例化。示例如下:
import {CxEvent} from "@spartacus/core";
export class CartAddEntryEvent extends CxEvent {
cartId: string;
userId: string;
productCode: string;
quantity: number;
}
下图是另一个 LanguageSetEvent
,继承自 CxEvent
,在此基础上削减了 activeLanguage
属性:
如何监听一个事件?
要察看给定类型的事件,能够获取事件类型的流,而后在须要的时候订阅它。上面是一个 CartAddEntryEvent 监听的例子:
constructor(events: EventService){}
/* ... */
const result$ = this.events.get(CartAddEntrySuccessEvent);
result$.subscribe((event) => console.log(event));
如果须要比特定事件中蕴含的数据更多的数据,您能够将该数据与其余流 (stream
) 组合。例如,能够从 Spartacus facade 收集额定的数据。
上面是一个响应“增加到购物车事件”的例子,而后期待购物车处于 stable 状态(因为 OCC 购物车须要从后端从新加载),而后将所有的购物车数据附加到事件中的数据:
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 了。
正文完
发表至: javascript
2022-07-11