Angular Bootstrap导航栏点击展开图标无响应问题求助

问题根源 #

你遇到的核心问题是原生Bootstrap的JS属性与ng-bootstrap不兼容，加上部分配置缺失：

• 你复制的是Bootstrap原生HTML代码，使用了data-toggle="collapse"这类原生属性，但ng-bootstrap是纯Angular实现的组件库，完全不依赖原生Bootstrap的JS（也不需要jQuery），因此这些原生属性无法触发折叠逻辑。
• 未正确导入ng-bootstrap的核心模块，导致折叠指令无法生效。

正确实现步骤 #

1. 替换导航栏HTML代码 #

使用ng-bootstrap的ngbCollapse指令替代原生属性，修改后的代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" 
          (click)="isCollapsed = !isCollapsed" 
          aria-controls="navbarNavAltMarkup" 
          aria-expanded="false" 
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" 
       [ngbCollapse]="isCollapsed" 
       id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

2. 在组件TS文件中添加控制变量 #

在对应组件的.ts文件中定义折叠状态变量：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component', // 替换为你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  isCollapsed = true; // 小屏默认折叠菜单
}

3. 确保导入ng-bootstrap核心模块 #

在你的根模块（如AppModule）中导入NgbModule，否则ngbCollapse指令无法识别：

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 { }

额外优化建议 #

• 移除无用依赖：Bootstrap 5和ng-bootstrap都不需要jQuery，直接删除package.json中的"jquery": "^3.6.3"，执行npm uninstall jquery清理。
• 验证CSS导入：你的styles.css中@import "~bootstrap/dist/css/bootstrap.css";在Angular 14中可正常工作，也可替换为相对路径@import "../node_modules/bootstrap/dist/css/bootstrap.css";避免路径解析问题。

内容的提问来源于stack exchange，提问作者Olivier De Brabant