SAP Spartacus 事件服务 Event Service 使用介绍
【摘要】 官方链接:https://sap.github.io/spartacus-docs/event-service/#page-titleThe Spartacus event service provides a stream of events that you can consume without a tight integration to specific components or...
官方链接:https://sap.github.io/spartacus-docs/event-service/#page-title
The Spartacus event service provides a stream of events that you can consume without a tight integration to specific components or modules. The event system is used in Spartacus to build integrations to third party systems, such as tag managers and web trackers.
Spartacus 事件服务提供了一个事件流,您可以使用这些事件流,而无需与特定组件或模块紧密集成。 Spartacus 中使用事件系统来构建与第三方系统的集成,例如标签管理器和网络跟踪器。
The event service also allows you to decouple certain components. For example, you might have a component that dispatches an event, and another component that reacts to this event, without requiring any hard dependency between the components.
事件服务还允许您解耦某些组件。 例如,您可能有一个分派事件的组件和另一个对该事件做出反应的组件,而无需组件之间的任何硬依赖。
一个例子:
import { CxEvent } from "@spartacus/core";
export class CartAddEntryEvent extends CxEvent {
cartId: string;
userId: string;
productCode: string;
quantity: number;
}
在 app module 里监听这个事件的代码:
export class AppModule {
constructor(events: EventService, myAdapter: OccCartAdapter) {
const result$ = events.get(CartAddEntrySuccessEvent);
result$.subscribe((event) => console.log(event));
}
}
运行时,我一旦将某个产品加到购物车里,就会触发上面 app module 里注册的匿名函数的 console.log, 打印出 CartAddEntrySuccessEvent 实例的值。
Pulling Additional Data From Facades - 从 Facade 中提取额外数据
如果您需要比特定事件中包含的数据更多的数据,您可以将此数据与其他流组合。 例如,您可以从 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 }))
);
运行时效果:
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)