共计 1738 个字符，预计需要花费 5 分钟才能阅读完成。
本文钻研 SAP 电商云 Spartacus UI Product Category Navigation UI 的实现明细。
selector: cx-category-navigation
Component name：CategoryNavigationComponent
navigation node 的数据，从 service 里获取的：
依据 Componentdata 拿到 navigation node 的数据：
navigation UI 上面是不同的 nav 子节点：
navigation UI 的 design 是数据驱动的：
nav 节点上有很多 click 事件注册：
在这里加上一行打印信息：
四次打印，两组。
看 /Brands/all/c/brands 蕴含在哪个 CMS response 里：/Open-Catalogue/Cameras/Digital-Cameras/c/575
答案是这个 url：
https://spartacus:9002/occ/v2…
取这些 ComponentID：
componentIds: AllBrandsCategoryLink,CanonBrandCategoryLink,SonyBrandCategoryLink,KodakBrandCategoryLink,SamsungBrandCategoryLink,ToshibaBrandCategoryLink,FujifilmBrandCategoryLink,KingstonBrandCategoryLink,IciduBrandCategoryLink,TDKBrandCategoryLink,SweexBrandCategoryLink,DigitalCamerasCategoryLink,DigitalCompactsCategoryLink,DigitalSLRCategoryLink,FilmCamerasCategoryLink,HandheldCamcordersCategoryLink,WebcamsCategoryLink,CameraAccessoriesCategoryLink,CamerasFlashesCategoryLink,TripodsCategoryLink,CameraLensesCategoryLink,FlashMemoryCategoryLink,PowerSuppliesCategoryLink,ColourFilmsCategoryLink,BlackAndWhiteFilmsCategoryLink,BlankVideotapesCategoryLink
Brand 上面又有两个子节点：camera 和 accessories：
Cameras 上面的 6 个子节点：
Accessories 上面的四个子节点：
在 Backoffice，Navigation Node 的名称：Electronics Site
类型：CMSNavigationNode
id：ElectronicsNavNode
有三个子 navigation node：
调配到一个 Link Component 上：
三个子节点的信息可能看见：
categories 的子节点：
以 sony link 为例：
他也是一个 navigation entry：
其 entry 在另一个模型里：
这个模型的类型就是 navigation node entry：
关联到一个 Sony Link Component 上：
这个 Component 有 url 和 category 属性：
它是一个 CMSLinkComponent：
这些 Component 的用处在 SAP 官网可能找到。
站点上的顶部导航菜单通过以下 CMS 组件的配置进行管制：
- NavigationComponents – 这些组件代表导航栏的各个局部。每个局部能够有一个 CMSLinkComponent 对象和一个 CMSNavigationNode 对象，被认为是根节点。
- CMSNavigationNodes – 这些组件代表导航树的构造，并具备在下拉菜单中出现的题目。每个构造能够有许多 CMSLinkComponent 对象和许多子 CMSNavigationNodes 对象。
- CMSLinkComponents – 这些组件在页面上出现并显示在导航树中的每个点。