Angular项目中ng-bootstrap的Collapse组件点击失效问题求助

你当前使用的是原生Bootstrap依赖jQuery实现的Collapse写法，@ng-bootstrap/ng-bootstrap是完全移除jQuery依赖的Angular原生组件库，不会识别data-toggle、data-target这类原生Bootstrap的DOM属性，这就是按钮点击无响应、a标签直接跳转的核心原因——代码没有触发ng-bootstrap的折叠逻辑。
同项目下ngb-accordion可以正常运行，是因为该组件是ng-bootstrap提供的Angular原生组件，走的是Angular组件渲染逻辑，和你当前写的原生DOM属性绑定写法属于两套完全独立的实现机制。
你使用的ng-bootstrap 12.x版本对应适配Angular 13、Bootstrap 5，直接照搬Bootstrap 4官方示例的原生写法本身就存在版本适配问题。

• 清理无效原生属性：删除代码中所有data-toggle="collapse"、data-target这类依赖jQuery才能生效的原生Bootstrap属性，不要通过原生id、class绑定实现折叠。
• 无需额外引入jQuery、popper.js等Bootstrap原生依赖：ng-bootstrap仅需要Bootstrap的样式文件即可运行，你当前全局样式引入、NgbModule的模块导入配置都是正确的，不需要调整。
• 使用ng-bootstrap提供的ngbCollapse指令实现折叠交互，正确代码示例如下：
  1. 先在对应组件的ts文件中定义折叠状态变量：

  // 组件类中添加状态控制变量，默认折叠
  isCollapsed = true;
  

  2. 在模板文件中绑定指令与点击事件：

  <p>
    <a class="btn btn-primary" role="button" (click)="isCollapsed = !isCollapsed"
       [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
      Link with href
    </a>
    <button class="btn btn-primary" type="button" (click)="isCollapsed = !isCollapsed"
       [attr.aria-expanded]="!isCollapsed" aria-controls="collapseExample">
      Button with data-target
    </button>
  </p>
  <div id="collapseExample" [ngbCollapse]="isCollapsed">
    <div class="card card-body">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
      keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </div>
  

• 可选优化：如果需要实现动画、手风琴互斥等高级效果，可以直接使用ngb-accordion组件，不需要自己手动实现折叠状态管理。

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