Angular2中使用Bootstrap3双击触发collapse()函数失败求助

嘿，我来帮你搞定这个双击触发折叠的问题！你遇到的核心问题是TypeScript环境下没法直接调用Bootstrap的collapse()方法，这主要是因为依赖引入和类型定义的问题，咱们一步步来解决：

1. 确保jQuery和Bootstrap JS正确引入 #

Bootstrap的折叠组件依赖jQuery，所以必须先引入jQuery再引入Bootstrap的JS文件。你需要在index.html里按顺序添加这两个脚本：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 再引入Bootstrap 3的JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

注意版本兼容，Bootstrap 3和jQuery 3.x是兼容的，选一个稳定版本就行。

2. 处理TypeScript的类型识别问题 #

TypeScript默认不知道$和Bootstrap的方法，所以有两种解决方式：

方式一：安装类型定义包 #

在项目根目录运行命令，安装jQuery和Bootstrap的类型声明：

npm install @types/jquery @types/bootstrap --save-dev

安装后TypeScript就能识别$和collapse()方法了。

方式二：声明全局变量（快速解决） #

如果不想安装类型包，可以在你的组件TypeScript文件顶部添加全局声明：

declare var $: any;

这样TypeScript就不会报错找不到$了。

3. 编写双击触发的折叠逻辑 #

修改你的组件代码，在toggleMe函数里用jQuery调用Bootstrap的折叠方法，同时注意避免默认点击事件的干扰：

TypeScript组件代码 #

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

declare var $: any; // 如果没安装类型包就加这个

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  toggleMe(event: Event) {
    event.preventDefault(); // 阻止默认行为，避免冲突
    $('#demo').collapse('toggle'); // 触发折叠切换
  }
}

HTML模板代码 #

把按钮上的data-toggle和data-target去掉，因为我们用代码手动触发，防止和默认的点击触发逻辑冲突：

<div class="container">
  <h2>Simple Collapsible</h2>
  <button (dblclick)="toggleMe($event)" type="button" class="btn btn-info">Simple collapsible</button>
  <div id="demo" class="collapse">
    <!-- 这里放你要折叠的内容 -->
    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.
  </div>
</div>

可选：不用jQuery的纯Angular实现 #

如果你不想依赖jQuery，也可以用Angular的指令来实现折叠，比如用[ngClass]控制显示隐藏和Bootstrap的动画类：

<div class="container">
  <h2>Simple Collapsible</h2>
  <button (dblclick)="isCollapsed = !isCollapsed" type="button" class="btn btn-info">Simple collapsible</button>
  <div id="demo" [ngClass]="{'collapse': isCollapsed, 'in': !isCollapsed}">
    <!-- 折叠内容 -->
  </div>
</div>

对应的TypeScript里加个变量：

isCollapsed = true;

这种方式不需要引入jQuery，完全用Angular的方式控制，适合不想用jQuery的场景。

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