Angular 8组件中Bootstrap 4.3下拉按钮无法正常工作求助

我来帮你搞定这个下拉菜单失效的问题，这种情况在Angular项目里用原生Bootstrap组件太常见了，核心原因是Bootstrap的交互组件（比如下拉、模态框）依赖jQuery和Popper.js，而Angular默认不会自动配置这些依赖，或者引入顺序不对导致功能失效。下面分两种方案给你解决：

方案一：配置原生Bootstrap依赖 #

如果想继续用你现在写的原生Bootstrap代码，按以下步骤操作：

1. 安装必要依赖
   在项目根目录执行命令，安装jQuery、Popper.js和指定版本的Bootstrap：

   npm install jquery popper.js bootstrap@4.3 --save
   

2. 修改angular.json配置文件
   找到architect -> build -> options节点，分别在styles和scripts数组中添加对应文件路径，注意scripts的顺序必须是jQuery先，Popper.js次之，最后是Bootstrap：

   "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"
   ]
   

3. 重启项目
   重启Angular开发服务器，让配置生效，之后你的下拉菜单点击应该就能正常展开了。

方案二：使用Ng-Bootstrap（更推荐） #

原生Bootstrap依赖jQuery，而jQuery的DOM操作和Angular的变更检测机制容易产生冲突，长期维护的话更推荐使用Ng-Bootstrap——这是专门为Angular打造的Bootstrap组件库，完全不需要jQuery和Popper.js，更符合Angular生态：

1. 安装Ng-Bootstrap和Bootstrap样式
   执行命令安装依赖：

   npm install @ng-bootstrap/ng-bootstrap bootstrap@4.3 --save
   

2. 导入Ng-Bootstrap模块
   在app.module.ts中导入NgbModule并添加到imports数组：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, NgbModule],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. 替换为Ng-Bootstrap的下拉组件代码
   把你原来的HTML代码替换成Ng-Bootstrap的写法：

   <div ngbDropdown class="d-inline-block">
     <button class="btn btn-secondary" id="dropdownMenuButton" ngbDropdownToggle>
       Dropdown button
     </button>
     <div ngbDropdownMenu aria-labelledby="dropdownMenuButton">
       <button ngbDropdownItem>Action</button>
       <button ngbDropdownItem>Another action</button>
       <button ngbDropdownItem>Something else here</button>
     </div>
   </div>
   

为什么原生Bootstrap在Angular里会失效？ #

Bootstrap的JavaScript组件是基于jQuery直接操作DOM的，而Angular有自己的视图渲染和变更检测机制，可能出现两种情况导致失效：

• Bootstrap初始化时，Angular还没渲染出对应的DOM元素，导致事件绑定失败
• jQuery的DOM操作会绕过Angular的变更检测，引发组件状态不同步

用Ng-Bootstrap就完全没有这些问题，它是纯Angular组件，和Angular的生命周期完美兼容。

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