Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWrapper 进行渲染。
![](https://img.haomeiwen.com/i2085791/7a8b9e3a4ba2a0f4.png)
在运行时,根据 Angular Component 的名称,即第90行 flexType 字段包含的 QuickOrderComponent,我们能够使用 Angular Component 动态创建 API 来触发这个 Component 的渲染。
![](https://img.haomeiwen.com/i2085791/62ce10da67c0690c.png)
![](https://img.haomeiwen.com/i2085791/5c2bf907edfa00a9.png)
default-component.handler.ts 里,调用 viewContainerRef 的 createComponent 方法,创建 Component 实例。
![](https://img.haomeiwen.com/i2085791/1f43f91968aa0b6b.png)
待创建的 Component 如果 constructor 里定义了外部依赖,需要完成这些依赖的创建和注入:
![](https://img.haomeiwen.com/i2085791/800a255ead72e528.png)
这里待注入的 token 就是 QuickOrderFacade:
![](https://img.haomeiwen.com/i2085791/ab9037652f42adc2.png)
这里解析出的 provider 是 QuickOrderService:
![](https://img.haomeiwen.com/i2085791/02ac7ea4d40fcc6e.png)
CoreModule 一旦被加载,下图第6行 facadeProviders 里的 provider 定义立即生效:
![](https://img.haomeiwen.com/i2085791/75abde355c312cd7.png)
也就是说,运行时,QuickOrderService 会成为 QuickOrderFacade 的具体实现:
![](https://img.haomeiwen.com/i2085791/4d44f11a795917d9.png)
![](https://img.haomeiwen.com/i2085791/4530d1351067266c.png)
更多Jerry的原创文章,尽在:"汪子熙":
![](https://img.haomeiwen.com/i2085791/97c4752c0e619c44.png)
网友评论