Angular项目中Bootstrap Navbar toggle按钮点击不显示导航项怎么办

问题原因 #

• 版本属性不匹配：如果使用的是Bootstrap 5.x版本，原Bootstrap 4中控制折叠的data-toggle、data-target属性已被重命名为data-bs-toggle、data-bs-target，使用旧属性无法触发折叠逻辑。
• 依赖缺失：Bootstrap 4版本的折叠交互依赖jQuery和Popper.js，若index.html中仅引入了Bootstrap CSS，未引入对应JS依赖，交互功能会直接失效。
• 框架冲突：Angular采用数据驱动的方式操作DOM，Bootstrap原生JS依赖jQuery直接操作DOM，二者逻辑冲突时会导致交互异常。

解决方案 #

方案1：调整属性/补全依赖（快速修复） #

如果使用Bootstrap 5，直接修改navbar toggler按钮的属性即可：

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
    aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

如果使用Bootstrap 4，检查index.html是否按顺序引入了jQuery、Popper.js、Bootstrap4的JS文件，三者引入顺序不可颠倒，缺失任意一个都需要补全。

方案2：使用Angular适配的Bootstrap组件库（长期稳定方案，推荐） #

Angular生态下有专门适配的Bootstrap组件库，无需引入jQuery和原生Bootstrap JS，不会和Angular的变更检测、DOM管理逻辑冲突：

1. 安装@ng-bootstrap/ng-bootstrap（适配Bootstrap 5）或ngx-bootstrap（适配Bootstrap 3/4）
2. 引入对应的Collapse模块后，使用Angular原生指令实现折叠功能，代码示例如下：

<!-- toggler按钮 -->
<button class="navbar-toggler" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed"
    aria-controls="navbarResponsive" [attr.aria-expanded]="!isNavbarCollapsed" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<!-- 折叠导航容器 -->
<div class="collapse navbar-collapse" id="navbarResponsive" [ngbCollapse]="isNavbarCollapsed">
    <!-- 原有导航项内容 -->
</div>

3. 在对应组件中声明控制变量：isNavbarCollapsed = true;即可正常使用。

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