Angular2中Navbar Toggler Icon不显示且无法切换问题排查

嘿，我来帮你排查下问题所在，你遇到的情况主要是两个核心错误导致的：

错误点分析 #

1. 破坏了Bootstrap默认图标结构
   Bootstrap的navbar-toggler-icon本身是用来渲染默认汉堡图标的容器（它通过伪元素或背景图实现图标），你在这个<span>里面嵌套自定义的<span class="icon-bar"></span>，直接打乱了它的样式逻辑，导致显示异常。

2. 缺少切换触发的关键属性
   你的切换按钮没有添加Bootstrap折叠组件必需的触发属性，这就导致点击按钮时，系统不知道要触发哪个菜单的折叠/展开动作。

两种修正方案 #

方案1：使用Bootstrap默认的汉堡图标（最简单）

直接恢复默认结构，加上触发属性即可：

<div class="row">
  <div class="col">
    <nav class="navbar navbar-expand-lg navbar-light bg-company-red">
      <!-- 修正后的切换按钮 -->
      <button class="navbar-toggler" type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarMenu" 
              aria-controls="navbarMenu" 
              aria-expanded="false" 
              aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- 折叠菜单容器（ID要和data-bs-target对应） -->
      <div class="collapse navbar-collapse" id="navbarMenu">
        <!-- 这里放你的导航菜单内容 -->
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
          <li class="nav-item"><a class="nav-link" href="#">关于</a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>

方案2：使用自定义的icon-bar样式

如果你想保留自己的icon-bar设计，需要去掉navbar-toggler-icon类，同时自己写CSS样式：

<div class="row">
  <div class="col">
    <nav class="navbar navbar-expand-lg navbar-light bg-company-red">
      <!-- 自定义切换按钮 -->
      <button class="navbar-toggler" type="button" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarMenu" 
              aria-controls="navbarMenu" 
              aria-expanded="false" 
              aria-label="Toggle navigation">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarMenu">
        <!-- 导航菜单内容 -->
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>

然后添加对应的CSS样式（根据你的导航栏背景色调整）：

.icon-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 4px 0;
  border-radius: 1px;
  background-color: #333; /* 换成你需要的图标颜色 */
}

关键注意事项 #

• 如果用的是Bootstrap 4，把data-bs-toggle换成data-toggle，data-bs-target换成data-target即可。
• 折叠菜单的ID必须和按钮的data-bs-target值完全匹配（注意前面的#）。

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