SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改

我们知道在 SAP 电商云 Spartacus UI 里，用户可以通过下拉菜单更改当前访问 site 的语言：

监控语言变化的代码：

this.subscription.add(this.languageService.getActive().subscribe((isoCode: string) =>this.setDirection(this.winRef.document.documentElement,this.getDirection(isoCode))));

这里的 get active，拿的其实是 active language：

从 ngrx store 里读取语言：

切换语言时发生了什么事情？

找到触发源：

在 Angular UI 里找到了 select 控件的 change 事件的响应处理逻辑：

等号右边是一个表达式：active = $event.target.value;

active 就是 Component 的属性，将 $event 的 target 的 value 字段值(即用户当前选中的语言)赋给 Component active 属性。

active 是 Component 的属性。

Component 将控制权交给 service：

根据不同的 context 拿到 service：

精髓在于，返回的是 Observable 对象：

等到 subscribe 调用时才触发：

更多Jerry的原创文章，尽在：“汪子熙”:

SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改相关推荐

在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...
如何在 SAP 电商云 Spartacus UI 里新建一个页面
因为 SAP Spartacus UI 是基于 CMS 驱动的,因此流程是:我们首先在 SAP Commerce Cloud Backoffice 创建新的 content page, CMS Com ...
如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据
答案是采用 CmsComponentData 这个服务. 看个实际例子: CmsQuickOrderComponent 的定义,维护在 models 文件夹里: 运行时,只能访问到上图新 extend ...
在 SAP 电商云 Spartacus UI 里使用自定义配置控制 UI 调试的开关
在 page-slot.module.ts 里,定义一个配置对象 ConfigUIDebug. 这个配置对象定义在 cms-component-data.ts 的 ConfigUIDebug 对象里, ...
SAP 电商云 Spartacus UI 里的 InjectionToken 应用场景
看个具体的例子: InjectionToken 构造函数,需要传一个类型参数进去. 这个 ActionReducerMap 的定义很讲究: export declare type ActionRedu ...
SAP 电商云 Spartacus UI 单元测试的依赖隔离设置举例
看一个具体的例子: DeliveryModeComponent,依赖到的一个服务为 CheckoutDeliveryFacade,其实现类为 CheckoutDeliveryService. 因此,在 ...
SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...

SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改

SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改相关推荐

最新文章

热门文章