Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWrapper 进行渲染。

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

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

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

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

default-component.handler.ts 里,调用 viewContainerRef 的 createComponent 方法,创建 Component 实例。
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试

待创建的 Component 如果 constructor 里定义了外部依赖,需要完成这些依赖的创建和注入:
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试

这里待注入的 token 就是 QuickOrderFacade:
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试

这里解析出的 provider 是 QuickOrderService:
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试

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

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

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

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

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

更多Jerry的原创文章,尽在:"汪子熙":
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试

相关文章: