如何用自定义HTML替换Spartacus导航菜单的OOTB CMS结构

要替换Spartacus开箱即用（OOTB）的CMS导航菜单HTML结构，改成指定的层级菜单样式，按以下步骤操作：

1. 创建自定义导航组件 #

用Angular CLI生成自定义组件，替换默认的导航组件：

ng generate component components/navigation/custom-navigation

2. 覆盖Spartacus的CMS组件配置 #

在项目的配置模块（比如app-config.module.ts）中，配置将默认的NavigationComponent替换为自定义组件：

import { NgModule } from '@angular/core';
import { CmsConfig, ConfigModule } from '@spartacus/core';
import { CustomNavigationComponent } from './components/navigation/custom-navigation.component';

const cmsConfig: CmsConfig = {
  cmsComponents: {
    NavigationComponent: {
      component: CustomNavigationComponent
    }
  }
};

@NgModule({
  imports: [
    ConfigModule.withConfig(cmsConfig)
  ]
})
export class AppConfigModule { }

3. 实现目标HTML结构 #

在custom-navigation.component.html中写入自定义的菜单结构（可根据实际路由调整routerLink）：

<ul>
  <li><a [routerLink]="['/']">HOME</a></li>
  <li>
    <a [routerLink]="['/association']">THE ASSOCIATION</a>
    <ul class="sub-menu">
      <li>
        <a [routerLink]="['/association/who-we-are']">WHO WE ARE</a>
      </li>
    </ul>
  </li>
  <li><a [routerLink]="['/contacts']">CONTACTS</a></li> 
  <li>
    <a [routerLink]="['/products']">PRODUCTS</a>
    <ul class="sub-menu">
      <li>
        <a [routerLink]="['/products/shoes']">SHOES</a>
      </li>
      <li>
        <a [routerLink]="['/products/umbrellas']">UMBRELLAS</a>
      </li>
    </ul>
  </li>
</ul>

如果需要从CMS动态拉取菜单数据而非硬编码，可以注入NavigationService获取菜单节点，再通过循环渲染结构。

4. 添加子菜单样式（可选） #

在custom-navigation.component.scss中添加样式控制子菜单显示：

.sub-menu {
  display: none;
  list-style: none;
  padding-left: 1rem;
}

li:hover .sub-menu {
  display: block;
}

内容的提问来源于stack exchange，提问作者avees