谈谈企业级前端 Angular 应用的定制化二次开发话题

本文以 SAP Commerce Cloud 电商云 UI 这个典型的基于 Angular 框架的企业级前端应用为例，介绍其定制化二次开发的思路和注意事项。

面向终端消费者的 SAP Commerce Cloud 电商云 UI，包含了基于古老 JSP 技术 和基于 SAP Spartacus 开源框架实现的两种版本，前者终将被后者取代。下图是基于 Spartacus 开源框架的 SAP Commerce Cloud 电商云界面。

关于 SAP Spartacus 的概要介绍，可以参考我这篇文章：Jerry在2020 SAP全球技术大会的分享：SAP Spartacus技术介绍的文字版。

本文从一个实际例子出发，介绍如何对 SAP Commerce Cloud 电商云的界面进行二次开发。

Jerry 2018 年的一篇文章：SAP UI 和 Salesforce UI 开发漫谈，曾经介绍过，比如分别基于 SAP ABAP Webdynpro 和 SAP WebClient UI 技术开发而成的 SAP SRM 和 SAP CRM UI，界面都是由一个个 UI Component(组件) 拼装而成。SAP Commerce Cloud 电商云 UI 也不例外。

回忆一下 SAP CRM UI 的二次开发流程：

1. 打开要定制化的 UI 界面，按 F2 快捷键打开技术明细界面，查到实现该界面的 UI Component 名称：BT116H_SRVO.

2. 使用对应的开发工具，打开组件 BT116H_SRVO，进行增强开发。

SAP Commerce Cloud 电商云 UI 的增强思路如出一辙。

SAP Commerce Cloud Spartacus 店面基于 JavaScript，因此，它由大量细粒度的 JavaScript 组件组成。 但是，有一种特殊的组件可以呈现 CMS 内容，即 CMS 组件，后者是在运行时动态添加的，由后端提供的 CMS 组件类型映射到等效的 JavaScript 组件。 映射在可定制的配置中提供。 这种设计就使得开发人员能够配置自定义组件以呈现特定的 CMS 组件。

与组件相关的 CMS 数据由 CmsComponentData 服务在实例化期间提供给组件。 CmsComponentData 服务包含组件 uid 和 data$，它是组件有效负载的可观察对象。 通过使用 Angular 依赖注入 (DI) 系统，组件和特定于组件的服务可以使用 CmsComponentData。

组件服务被设计为非单例服务，作用于组件，因此它们可以直接访问组件作用域中提供的 CmsComponentData。 这种设计不适用于 Angular DI 系统，因为 DI 系统没有提供在不更改组件的情况下覆盖组件服务的机制。

以上是理论介绍，我们来看个具体的例子。

假设我想对下图高亮区域, 即 SAP 电商云的购物车(Cart)页面的产品列表部分，进行二次开发。

在 Chrome 开发者工具里，找到上图实现页面的 Angular 组件对应的 selector：cx-cart-details.

根据找到的 selector cx-cart-details , 作为关键字，在 SAP Spartacus 源代码里进行搜索。

每个 Angular Component 同其 selector 具有一一对应关系，因此我们找到了 Component selector cx-cart-details, 也就找到了组件名称：CartDetailsComponent：

在 SAP Spartacus 的默认实现里，SAP Commerce Cloud 后台的 Cart 模型 CartComponent，映射的 Angular Component，正好是我们之前找到的 CartDetailsComponent：

所以接下来，我们要做的事情：

1. 创建一个新的 Angular Component，扩展自标准 Angular Component CartDetailsComponent.

如下图所示，我给这个新建的 Component 取名为 MyCartComponent，其 selector 为 app-my-cart.

新建的 MyCartComponent 扩展自 标准的 CartDetailsComponent，既可重用后者已有的业务逻辑，也可以编写新的业务逻辑。

而 UI 界面的二次开发，在该 Component 对应的模板文件，my-cart.component.html 里实现。

为简单起见，在我自定义的 MyCartComponent 里，我仅仅打印出添加到购物车里的产品名称，然后首尾加上两个一级标题。

MyCartComponent 开发完毕后，将其映射到 SAP Commerce Cloud 后台 CMS 模型 CartComponent 上。

下图第 83 行～89 行的语义是，通过 ConfigModule.withConfig 方法，定义了一个优先级比 SAP Spartacus 标准配置优先级更高的客户配置，该配置的内容是一条映射记录，告诉 SAP Spartacus 框架：当页面要渲染 SAP Commerce Cloud 名为 CartComponent 的模型时，请使用我开发的 MyCartComponent 进行页面绘制。

这个二次开发最后的效果如下：

在生成的 HTML 源代码里，我们自定义的 Angular Component 的 selector app-my-cart, 取代了 SAP Spartacus 标准 Cart Component 的 selector cx-cart-details.

当然，这种使用自定义 Angular Component 去替换 SAP Commerce Cloud 电商云标准 Component 的做法，只是 SAP 电商云 UI 众多自开发方式的一种，后续笔者会介绍其他增强方式，感谢阅读。