Jerry 之前的文章[SAP 产品 UI 里的容器组件的概念和开发概述](https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247493883&idx=1&sn=1dbc49885ea55826dddc7dd52eb90d2d&chksm=ead65a6cdda1d37ad6f7a2d0d343695853c98e55b5bf19f0465233e2973efe7bdf2af9adc0e2&token=826591740&lang=zh_CN#rd)介绍过，SAP Spartacus Angular Component，通过我们开发团队自定义的指令 cxComponentWrapper 进行渲染。

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

在运行时，根据 Angular Component 的名称，即第90行 flexType 字段包含的 QuickOrderComponent，我们能够使用 Angular Component 动态创建 API 来触发这个 Component 的渲染。

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

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

default-component.handler.ts 里，调用 viewContainerRef 的 createComponent 方法，创建 Component 实例。
![](https://img-blog.csdnimg.cn/img_convert/f8b582af7639589df04904865cca54f8.png)

待创建的 Component 如果 constructor 里定义了外部依赖，需要完成这些依赖的创建和注入：
![](https://img-blog.csdnimg.cn/img_convert/e1c0e06c51e44b52f97ff802b8c47d66.png)

这里待注入的 token 就是 QuickOrderFacade：
![](https://img-blog.csdnimg.cn/img_convert/aeee6fac6e6591e32e793d2fbecb5dc1.png)

这里解析出的 provider 是 QuickOrderService：
![](https://img-blog.csdnimg.cn/img_convert/025b9213d209e58ea0d74660a0f3b0d1.png)

CoreModule 一旦被加载，下图第6行 facadeProviders 里的 provider 定义立即生效：

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

也就是说，运行时，QuickOrderService 会成为 QuickOrderFacade 的具体实现：

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

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

ITPub博客

SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试

最新文章