如何使用自定义 html 更改 Spartacus 导航菜单

【问题标题】：how change Spartacus Navigation menu with custom html如何使用自定义 html 更改 Spartacus 导航菜单
【发布时间】：2022-08-04 01:00:27
【问题描述】：

想使用这个 HTML

而不是 spartacus OOTB cms html 我想更改为以下 html 结构

        <li><a href=\"\">HOME</a></li>
        <li><a href=\"\">THE ASSOCIATION</a></li>
            <ul class=\"sub-menu\">
                <li>
                   <a>WHO WE ARE</a>
                </li>
            </ul>
        <li><a href=\"\">CONTACTS</a></li> 
        <li><a href=\"\">PRODUCTS</a></li>
            <ul class=\"sub-menu\">
                <li>
                   <a>SHOES</a>
                </li>
                <li>
                   <a>UMBRELLAS</a>
                </li>
            </ul>          
   </ul>```

标签： spartacus-storefront

【解决方案1】：

您需要覆盖 OTB 组件，您可以通过以下方式访问导航菜单：

node$: Observable = this.service.getNavigationNode( this.componentData.data$ );

data$: Observable = this.componentData.data$;

构造函数（受保护的组件数据：CmsComponentData，受保护的服务：NavigationService， ) { }

您可以在模板中迭代 node$

【讨论】：