咱们晓得在 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的原创文章,尽在:"汪子熙":