Angular项目中Bootstrap 4折叠卡片点击跳转路由而非折叠的问题

我之前也碰到过一模一样的问题！这个情况主要由两个原因导致，咱们一步步来解决：

原因1：Bootstrap折叠组件的依赖未正确加载 #

Bootstrap 4的折叠（Collapse）功能依赖jQuery和Popper.js，如果你的Angular项目里没有正确引入这两个库，Bootstrap的JS逻辑就无法接管a标签的点击事件，浏览器就会执行默认的锚点跳转行为。

解决步骤： #

1. 安装依赖：

   npm install jquery popper.js bootstrap --save
   

2. 在angular.json里配置这三个库的脚本和样式：

   "styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/styles.css"
   ],
   "scripts": [
     "node_modules/jquery/dist/jquery.min.js",
     "node_modules/popper.js/dist/umd/popper.min.js",
     "node_modules/bootstrap/dist/js/bootstrap.min.js"
   ]
   

3. 重启Angular开发服务器，让配置生效。

原因2：Angular拦截了a标签的默认行为 #

即使加载了依赖，Angular的默认事件处理可能还是会干扰Bootstrap的逻辑。这时候可以给a标签添加(click)="$event.preventDefault()"来阻止默认的跳转行为：

修改你的a标签代码：

<a class="card-link" data-toggle="collapse" href="#collapseOne" (click)="$event.preventDefault()">
  Collapsible Group Item #1
</a>

同理，另外两个a标签也加上这个点击事件处理即可。

更推荐的方案：使用ng-bootstrap #

如果你不想引入jQuery（毕竟Angular项目尽量避免依赖jQuery），可以用ng-bootstrap——这是官方为Angular打造的Bootstrap组件库，完全基于Angular实现，不需要依赖jQuery和Popper.js。

快速上手： #

1. 安装ng-bootstrap：

   npm install @ng-bootstrap/ng-bootstrap bootstrap --save
   

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

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
     imports: [NgbModule]
   })
   export class AppModule { }
   

3. 使用ng-bootstrap的折叠组件，示例代码：

   <div ngbAccordion #acc="ngbAccordion" activeIds="ngb-panel-0">
     <div ngbPanel title="Collapsible Group Item #1">
       <ng-template ngbPanelContent>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       </ng-template>
     </div>
     <div ngbPanel title="Collapsible Group Item #2">
       <ng-template ngbPanelContent>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       </ng-template>
     </div>
     <div ngbPanel title="Collapsible Group Item #3">
       <ng-template ngbPanelContent>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
       </ng-template>
     </div>
   </div>
   

这样就完全不会有路由跳转的问题，而且更符合Angular的开发习惯。

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