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