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

![](https://img-blog.csdnimg.cn/img_convert/27c5a466818245c2b4caaded9876a381.png)

监控语言变化的代码：

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

这里的 get active，拿的其实是 active language：
![](https://img-blog.csdnimg.cn/img_convert/84875c8772ff89b01faf4fa895f71ad3.png)

从 ngrx store 里读取语言：
![](https://img-blog.csdnimg.cn/img_convert/8d464b4aa85c9d80bc57661bce0016a0.png)

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

![](https://img-blog.csdnimg.cn/img_convert/ae82f164f4164644695f7a7374dea48b.png)

找到触发源：
![](https://img-blog.csdnimg.cn/img_convert/333f46d4bb4318847ed60593d1c9e467.png)

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

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

active 就是 Component 的属性，将 $event 的 target 的 value 字段值(即用户当前选中的语言)赋给 Component active 属性。
![](https://img-blog.csdnimg.cn/img_convert/850d3bc2fff2fee2998b7c01c1f7ad0b.png)

active 是 Component 的属性。

Component 将控制权交给 service：
![](https://img-blog.csdnimg.cn/img_convert/0114078287bb8be7ead1565670f65f71.png)

根据不同的 context 拿到 service：
![](https://img-blog.csdnimg.cn/img_convert/d08cbc37535b59c7a5086f4e3c2abb21.png)

![](https://img-blog.csdnimg.cn/img_convert/1dc24df4e21397b564ae962da91001d5.png)

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

![](https://img-blog.csdnimg.cn/img_convert/3330d85279cf444a2091a044f1c2e294.png)

等到 subscribe 调用时才触发：
![](https://img-blog.csdnimg.cn/img_convert/b397d14d6f913950cf8a648bfa37fc11.png)

![](https://img-blog.csdnimg.cn/img_convert/7c1d9a41a0e0ac3489435a39bd9affac.png)

ITPub博客

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

最新文章