Angular中Bootstrap下拉菜单点击无响应问题排查求助

你的问题核心是两个关键配置遗漏：

1. Bootstrap 5属性名变更
   Bootstrap 5已将原下拉菜单的data-toggle属性替换为data-bs-toggle，这是触发交互的必要属性，修改后代码如下：

   <div class="dropdown">
       <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuSex" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           Sex
       </button>
       <div class="dropdown-menu" aria-labelledby="dropdownMenuSex">
           <a class="dropdown-item" href="#">Female</a>                
           <a class="dropdown-item" href="#">Male</a>                
       </div>
   </div>
   

2. 未引入Bootstrap交互依赖
   Bootstrap的下拉菜单等交互组件依赖@popperjs/core和Bootstrap自身的JS文件，需完成以下配置：

   • 安装依赖：

     npm install bootstrap @popperjs/core
     

   • 在angular.json的styles数组中引入Bootstrap样式：

     "styles": [
         "node_modules/bootstrap/dist/css/bootstrap.min.css",
         "src/styles.css"
     ]
     

   • 在angular.json的scripts数组中引入Popper和Bootstrap JS：

     "scripts": [
         "node_modules/@popperjs/core/dist/umd/popper.min.js",
         "node_modules/bootstrap/dist/js/bootstrap.min.js"
     ]
     

如果想更贴合Angular生态，也可以使用ng-bootstrap库——它是专为Angular封装的Bootstrap组件集，无需手动引入Bootstrap JS，直接通过Angular指令即可实现交互逻辑。

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