使用Bootstrap隐藏类替代*ngIf后网页端下拉菜单失效问题

核心诱因分析 #

你当前遇到的下拉菜单失效问题，90%以上概率是DOM重复ID冲突导致的：
原来使用*ngIf是条件渲染，同一时间只会在DOM中插入移动端/网页端其中一个容器，两个容器共用id="m_header_nav"不会有问题；替换为Bootstrap响应式隐藏类后，两个容器会同时存在于DOM中，仅通过CSS控制显示/隐藏，重复ID会导致菜单的事件绑定逻辑出错。

排查步骤 #

• 打开浏览器开发者工具的元素面板，搜索m_header_nav，确认是否出现2个相同ID的div节点
• 点击网页端的「Click here」按钮，查看控制台是否有JS报错，同时观察下拉菜单的DOM节点是否有active/open这类标识展开的类名添加：
  • 如果没有类名添加，说明点击事件没有绑定到当前可见的网页端菜单上
  • 如果有类名添加但菜单不可见，说明是CSS样式覆盖导致的显示问题
• 检查你项目中m-menu-submenu-toggle自定义指令的初始化逻辑，确认是否只会在元素首次插入DOM时执行一次，导致隐藏的移动端菜单初始化完成，可见的网页端菜单反而没有绑定事件

解决方法 #

1. 优先修复ID冲突：给两个容器设置唯一ID，比如移动端改为id="m_header_nav_mobile"，网页端改为id="m_header_nav_desktop"，即可解决90%的事件绑定问题
2. 如果是自定义指令未初始化的问题：可以给网页端的菜单节点添加*ngIf条件，仅在非移动端时渲染，配合Bootstrap响应式类使用，或者在ngAfterViewInit生命周期钩子中主动触发一次网页端菜单的初始化逻辑
3. 如果是CSS显示问题：给下拉菜单的外层容器添加position: relative属性，同时给下拉菜单本身设置足够高的z-index值，避免被其他元素遮挡

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