^翻译如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据

答案是采用 CmsComponentData 这个服务。

看个实际例子：

![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_abap](https://s2.51cto.com/images/blog/202111/22001702_619a70feb0a4169113.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

CmsQuickOrderComponent 的定义，维护在 models 文件夹里：
![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_abap_02](https://s2.51cto.com/images/blog/202111/22001703_619a70ff262e466362.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

运行时，只能访问到上图新 extend 出的字段 quickOrderListLimit 的值：

![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_abap_03](https://s2.51cto.com/images/blog/202111/22001703_619a70ff7686387893.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

我们另外找一个 Banner Component 试试。

![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_github_04](https://s2.51cto.com/images/blog/202111/22001703_619a70ffaa6e917484.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_ide_05](https://s2.51cto.com/images/blog/202111/22001703_619a70ffd478a52152.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

对于 BannerComponent 来说，CmsComponentData 的数据是完整的。

这个 CmsComponentData 只是一个 abstractClass , 它的运行时实例化发生在什么时候呢？
![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_github_06](https://s2.51cto.com/images/blog/202111/22001704_619a710026ada32401.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

运行时，是一个 object：
![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_ide_07](https://s2.51cto.com/images/blog/202111/22001704_619a71004e32f57337.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

找到一个 Component Data provider：
![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_ide_08](https://s2.51cto.com/images/blog/202111/22001704_619a7100b034f30542.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

最终答案是，SAP Spartacus 开发团队，设计了一个统一的 cms-injector.service.ts, 用于为所有 CMS Component 统一注入 CmsComponentData. 因为注入时需要编写自定义代码，所以以 useFactory 的方式注入。

![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_自定义_09](https://s2.51cto.com/images/blog/202111/22001704_619a7100e60ce59426.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

更多Jerry的原创文章，尽在："汪子熙":
![如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据_github_10](https://s2.51cto.com/images/blog/202111/22001705_619a71010123096775.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184)

    ===========================
    【来源： 51CTO】
    【作者： JerryWang汪子熙】
    【原文链接】 https://blog.51cto.com/jerrywangsap/4659540
    声明：转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢。