Angular15.0.3+Bootstrap4.0.0导航栏下拉菜单不显示Save选项问题

问题诊断 #

你的下拉菜单无法显示Save选项，核心原因是Bootstrap4下拉组件缺少必要的结构类和触发属性，再加上Angular环境下原生Bootstrap的依赖加载逻辑可能存在冲突。

修复步骤 #

1. 修正HTML结构与属性 #

Bootstrap4对导航栏下拉组件的结构有明确要求，修改你的代码如下：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <!-- 给父li补充nav-item类，对齐导航栏结构 -->
    <li class="nav-item dropdown">
      <!-- 添加下拉触发必备的data-toggle属性，及可访问性相关属性 -->
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
        <!-- 给下拉选项添加dropdown-item类，确保样式正常渲染 -->
        <li><a class="dropdown-item" href="#">Save</a></li>
      </ul> 
    </li>
  </ul>
</div>

关键修改点：

• 下拉父容器<li>必须添加nav-item类，和导航栏其他项保持统一结构
• 触发下拉的<a>标签需添加data-toggle="dropdown"属性，这是Bootstrap4触发下拉的核心属性，同时补充aria-haspopup="true"和aria-expanded="false"提升页面可访问性
• 下拉菜单内的链接需添加dropdown-item类，保证样式与Bootstrap4的设计规范一致

2. 确保Bootstrap依赖正确加载 #

Bootstrap4的交互组件（如下拉）依赖jQuery和Popper.js，在Angular15中配置方式如下：
通过angular.json文件引入依赖资源：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/popper.js/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

注意：Angular官方不推荐直接引入jQuery，因为其DOM操作逻辑会与Angular的变更检测机制冲突。更稳妥的方案是使用ng-bootstrap——专为Angular适配的Bootstrap组件库，无需依赖jQuery和Popper.js。

如果选择ng-bootstrap，操作步骤如下：

1. 安装依赖：

npm install @ng-bootstrap/ng-bootstrap bootstrap@4

2. 在app.module.ts中导入组件模块：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports: [
    // ...其他模块导入
    NgbModule
  ]
})
export class AppModule { }

3. 使用ng-bootstrap的下拉组件替换原生代码：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" ngbDropdownToggle>
        Dropdown
      </a>
      <div ngbDropdownMenu aria-labelledby="navbarDropdown">
        <button ngbDropdownItem href="#">Save</button>
      </div>
    </li>
  </ul>
</div>

总结 #

优先推荐使用ng-bootstrap适配Angular环境，彻底规避jQuery带来的兼容性问题；如果坚持使用原生Bootstrap，必须同时保证HTML结构正确、依赖脚本加载顺序无误。

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