Angular集成Bootstrap时导航栏collapse折叠功能小屏失效如何解决？

问题原因1：Bootstrap版本与依赖不匹配 #

你代码中使用的data-bs-*前缀属性是Bootstrap 5的专属API，而引入jQuery的写法是Bootstrap 4及更早版本的依赖要求。Bootstrap 5已经完全移除了jQuery依赖，如果你安装的是Bootstrap 5版本，引入jQuery反而会导致JS逻辑冲突，造成折叠功能失效。

修复方案：

先执行npm list bootstrap确认安装的Bootstrap版本：

• 如果是Bootstrap 5版本，修改angular.json的scripts配置，移除jQuery引入，改为引入带bundle后缀的Bootstrap JS文件（内置了必需的Popper.js依赖，单独引入bootstrap.min.js会缺少依赖导致交互失效）：

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

问题原因2：原生Bootstrap JS与Angular视图逻辑冲突 #

原生Bootstrap JS基于原生DOM操作实现，和Angular的组件渲染逻辑容易出现兼容问题，更推荐使用Angular官方适配的@ng-bootstrap/ng-bootstrap组件库，无需引入jQuery和Bootstrap原生JS，完全基于Angular原生语法实现交互。

修复方案：

1. 安装对应适配版本的依赖：

npm install @ng-bootstrap/ng-bootstrap @popperjs/core

2. 在app.module.ts中导入NgbModule：

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

@NgModule({
  imports: [
    // 原有其他导入项
    NgbModule
  ]
})
export class AppModule { }

3. 在对应组件的TS文件中声明折叠控制变量：

isMenuCollapsed = true;

4. 修改导航栏HTML代码，替换原生属性为ng-bootstrap的collapse指令：

<header class="navbar bg-main-bg pt-0 pb-0 mt-0 mb-0" style="z-index: 1000; height: 80px;">
    <nav class="container navbar-expand-md h-100">
        <a class="navbar-brand" href="#" style="margin-right: 120px; height: 50px;">
            <app-coin [width]="50" [height]="50" text="A"></app-coin>
            <h1 class="position-relative text-txt-h" style="line-height: 50px; left: 52px;">LBAR</h1>
        </a>
        <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navbarToggler" class="collapse navbar-collapse h-100" [ngbCollapse]="isMenuCollapsed">
            <ul class="navbar-nav h-100 text-uppercase">
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" routerLink="/" (click)="isMenuCollapsed = true">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" routerLink="/work" (click)="isMenuCollapsed = true">Work</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link h-100 pr-5 pl-5" routerLinkActive="active" routerLink="/contact" (click)="isMenuCollapsed = true">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</header>

问题原因3：配置未生效或缓存问题 #

修改angular.json配置后需要停止当前Angular服务，重新执行ng serve启动服务，同时清理浏览器缓存，避免加载旧的JS文件导致配置不生效。

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