Angular 9中Bootstrap collapse失效 响应式导航栏无法展开求助

根因1：Bootstrap 5属性命名规则变更 #

你当前使用的是Bootstrap 5版本，该版本将所有交互相关的自定义数据属性前缀从Bootstrap 4的data-*调整为data-bs-*，你模板中仍然使用旧版的data-toggle、data-target属性，无法触发Bootstrap 5的collapse逻辑。

根因2：依赖版本与引入配置错误 #

Bootstrap 5不再依赖jQuery，且要求配套使用Popper.js 2.x版本，你当前安装的popper.js 1.x版本不兼容，同时额外引入的jQuery可能引发不必要的全局变量冲突。

解决方案 #

方案1：适配Bootstrap 5原生规则（最快修复） #

1. 修改导航栏折叠按钮的属性，替换为Bootstrap 5要求的前缀：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse"  data-bs-target="#collapsibleNavbar">
  <span class="navbar-toggler-icon"></span>
</button>

2. 卸载不需要的旧依赖：

npm uninstall jquery popper.js

3. 修改angular.json中的scripts配置，引入自带Popper的Bootstrap 5打包版本，避免单独引入Popper的版本兼容问题：

"scripts": [
  "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
  "src/custom.js"
]

4. 重启Angular开发服务生效。

方案2：Angular原生实现（更稳定，无全局JS冲突） #

如果不想依赖Bootstrap的全局JS逻辑，推荐用Angular自带的状态绑定实现折叠功能，完全规避版本兼容问题：

1. 在对应组件的ts文件中添加状态变量：

// 组件类内部添加
isMenuCollapsed = true;

2. 修改模板中的按钮逻辑，绑定点击事件切换状态：

<button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">
  <span class="navbar-toggler-icon"></span>
</button>

3. 给折叠菜单绑定类状态：

<div class="navbar-collapse" [class.collapse]="isMenuCollapsed" id="collapsibleNavbar">

该方案不需要调整任何依赖和引入配置，适配所有Angular+Bootstrap版本组合，后续维护成本更低。

内容的提问来源于stack exchange，提问作者M. Bal.