SAP 电商云 Spartacus UI 点了 Shipping
2021-12-18 本文已影响0人
华山令狐冲
shipping method 两个备选项,通过类型为 radio 的 input 控件实现:
![](https://img.haomeiwen.com/i2085791/f5556a23db7fce83.png)
值发生 change 之后,触发 changeMode 方法的执行:
![](https://img.haomeiwen.com/i2085791/1cf67ef37e6dac76.png)
changeMode 会把执行逻辑交给 checkoutDeliveryService:
![](https://img.haomeiwen.com/i2085791/37fc8a01b4868680.png)
这个 service 的类型是一个 abstract class, facade:
![](https://img.haomeiwen.com/i2085791/612e965651a5018d.png)
![](https://img.haomeiwen.com/i2085791/ea047491885c0c04.png)
真正的实现类在 CheckoutDeliveryService:
![](https://img.haomeiwen.com/i2085791/241b667602e003fa.png)
最后使用 NgRx,dispatch action,将调用投递到 Effect:
![](https://img.haomeiwen.com/i2085791/d6c17be9e681610a.png)
Effect 实现里使用 mergeMap,以支持并发请求:
![](https://img.haomeiwen.com/i2085791/4cf8773f978e954a.png)
更多Jerry的原创文章,尽在:"汪子熙":
![](https://img.haomeiwen.com/i2085791/97c4752c0e619c44.png)