Angular项目中Bootstrap导航栏下拉菜单失效，需哪些必要配置？

核心问题分析 #

你遇到的问题主要来自两个矛盾：

1. 版本不兼容：安装的是Bootstrap 5.2.1，但使用的是Bootstrap 4的文档代码，两者下拉菜单的属性、结构存在差异。
2. 依赖冲突/冗余：Bootstrap 5不再强制依赖jQuery，且需要的是@popperjs/core而非旧版popper.js；同时引入的@ng-bootstrap/ng-bootstrap（纯Angular实现的Bootstrap组件），会和原生Bootstrap JS产生冲突。

下面提供两种可行的解决方案，任选其一即可：

方案一：使用原生Bootstrap 5（保留原生Bootstrap依赖） #

1. 修正Popper依赖 #

卸载旧版popper.js，安装Bootstrap 5要求的@popperjs/core：

npm uninstall popper.js
npm install @popperjs/core

2. 更新angular.json配置 #

移除冗余的jQuery依赖（Bootstrap 5不需要），替换Popper的路径：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@ng-select/ng-select/themes/default.theme.css"
],
"scripts": [
  "node_modules/@popperjs/core/dist/umd/popper.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

3. 替换为Bootstrap 5的下拉菜单代码 #

将Bootstrap 4的代码替换为Bootstrap 5的格式，核心变化是将data-toggle改为data-bs-toggle，补充必要的ARIA属性：

<!-- Bootstrap 5 下拉菜单示例 -->
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    下拉菜单
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">操作1</a></li>
    <li><a class="dropdown-item" href="#">操作2</a></li>
    <li><a class="dropdown-item" href="#">其他操作</a></li>
  </ul>
</div>

方案二：使用@ng-bootstrap/ng-bootstrap（更适配Angular） #

@ng-bootstrap/ng-bootstrap是纯Angular实现的Bootstrap组件库，无需依赖jQuery、原生Bootstrap JS，更符合Angular的开发模式。

1. 清理冗余依赖 #

卸载不需要的jQuery、旧版Popper：

npm uninstall jquery popper.js

2. 更新angular.json配置 #

移除scripts中的所有JS依赖，只保留CSS：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/@ng-select/ng-select/themes/default.theme.css"
],
"scripts": []

3. 导入ng-bootstrap模块 #

在app.module.ts中导入下拉菜单模块：

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

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

4. 使用ng-bootstrap的下拉组件 #

采用ng-bootstrap专属的指令语法：

<!-- ng-bootstrap 下拉菜单示例 -->
<div ngbDropdown class="d-inline-block">
  <button class="btn btn-secondary" id="dropdownMenu" ngbDropdownToggle>
    下拉菜单
  </button>
  <div ngbDropdownMenu aria-labelledby="dropdownMenu">
    <button ngbDropdownItem>操作1</button>
    <button ngbDropdownItem>操作2</button>
    <button ngbDropdownItem>其他操作</button>
  </div>
</div>

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