SAP Spartacus 启动时，会从 SAP Commerce Cloud 后台发起 OCC API 调用，url 如下：

https://spartacus7673.eastus.cloudapp.azure.com:9002/occ/v2/electronics-spa/cms/pages?lang=en&curr=USD

这个 OCC API 响应结构如上图所示：

我们把这个 JSON 字符串粘贴到一些 JSON 数据美化工具里查看，发现每个 navigation node 节点，都包含 uid，uuid 等字段：

在 Spartacus createNavigation 方法里，返回的 JSON 对象只包含 data 和 children 两个字段：

其中 title 来自 ComponentData 的 name 属性，如下图所示：

而 children 的数据源 nav, 里面的 children 数组的元素，只包含 title 和 url 属性。

一个客户的自开发功能，需要使用到 OCC API 里的 uid 字段。因此本文介绍了一种方式，可以让 OCC API Response 响应结构里的 uid 字段，暴露给 createNavigation 方法返回的 JSON 对象里。

下面是详细的实现步骤。

接口增强

创建一个新的接口，来扩展默认的 NavigationNode 接口。这个新的接口里，声明一个新的字段，来存储客户业务逻辑里需要使用的额外字段。

export interface ExtNavigationNode extends NavigationNode{    jerry?:string;}

创建一个 NavigationService 的子类

创建子类，并复写该类的 createNavigation 方法。

如此一来，我们就可以在 createNavigation 方法的子类实现里，将客户需要的额外字段，写入到步骤 1 扩展的接口的自定义字段里。

源代码如下：

createNavigation(data$: Observable<CmsNavigationComponent>): Observable<ExtNavigationNode>{    const result = combineLatest([data$, this.getNavigationNode(data$)]).pipe(        map(([data, nav]) => {
          debugger;          return {              title: data.name,                children: [nav],                jerry:data.uid              }        })      );      result.subscribe((data) => console.log('Jerry navigation: ', data));      return result;  }

在 App Module 里注入新的子类实现

使用 Angular 依赖注入机制，将我们自定义的子类实现，注入到 App Module 的依赖树里：

providers: [    provideConfig({      cmsComponents: {        NavigationComponent: {            providers: [            {              provide: NavigationService,              useClass: JerryNavigationService            }          ]        }      }    })  ],

现在在运行时里，我们就可以在 Chrome 开发者工具 console 面板里，观察到我们重定义的 NavigationService 子类的 createNavigation 方法返回的额外字段值已经被 console.log 打印出来了。