Angular 4中使用data-target属性的Bootstrap折叠功能失效问题

嘿，我来帮你搞定这个Bootstrap折叠失效的问题！在Angular 4里直接用原生Bootstrap的data-toggle经常会踩坑，主要是Angular的变更检测机制和jQuery（Bootstrap JS依赖）的DOM操作逻辑不太兼容，再加上动态渲染的元素（比如*ngFor循环出来的内容）没办法被Bootstrap自动绑定事件。咱们一步步来解决：

首先得确保jQuery和Bootstrap已经正确安装并引入到项目里，毕竟Bootstrap的折叠功能依赖jQuery：

• 先安装依赖：

npm install jquery bootstrap --save

• 打开angular-cli.json（如果是Angular 6+版本就是angular.json），在scripts数组里添加jQuery和Bootstrap的JS文件路径：

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

同时在styles数组里引入Bootstrap的CSS：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "styles.css"
]

直接用原生的data-toggle和data-target在动态渲染的DOM里很容易失效，推荐两种更靠谱的方案：

方案一：用NgBootstrap（官方维护的纯Angular版Bootstrap） #

NgBootstrap完全抛弃了jQuery，用Angular原生实现了Bootstrap组件，适配性拉满：

1. 安装对应版本的NgBootstrap（Angular 4要选1.x版本）：

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

2. 在你的AppModule里导入NgbModule：

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

@NgModule({
  imports: [
    // 其他已导入的模块...
    NgbModule.forRoot()
  ]
})
export class AppModule { }

3. 结合*ngFor改写折叠模板，每个循环项用独立的状态控制：

<div *ngFor="let idea of ideas" class="panel panel-default">
  <div class="panel-heading" (click)="idea.isCollapsed = !idea.isCollapsed">
    {{ idea.title }}
  </div>
  <div [ngbCollapse]="idea.isCollapsed" class="panel-body">
    <cite>{{ idea.author }}</cite>
    <p>{{ idea.description }}</p>
    <button type="button" class="btn btn-primary" (click)="idea.isCollapsed = !idea.isCollapsed">
      切换详情
    </button>
  </div>
</div>

然后在组件类里给每个idea对象加个折叠状态属性：

// 组件类示例
ideas = [
  { title: "创意1", author: "张三", description: "这是第一个创意", isCollapsed: false },
  { title: "创意2", author: "李四", description: "这是第二个创意", isCollapsed: false }
];

方案二：手动用Angular控制折叠状态（不用额外组件） #

如果你不想引入NgBootstrap，也可以手动操作DOM类来控制折叠：

1. 给每个折叠面板设置唯一ID，用循环索引就行：

<div *ngFor="let idea of ideas; let i = index" class="panel panel-default">
  <div class="panel-heading">{{ idea.title }}</div>
  <div class="panel-body">
    <cite>{{ idea.author }}</cite>
    <p>{{ idea.description }}</p>
    <button type="button" class="btn btn-primary" (click)="toggleCollapse(i)">
      切换折叠
    </button>
    <!-- 折叠内容区域 -->
    <div #collapsePanel id="collapse-{{i}}" class="collapse">
      这里是折叠显示的额外内容...
    </div>
  </div>
</div>

2. 在组件类里写切换方法，用纯Angular的方式操作DOM：

import { ElementRef, ViewChildren, QueryList } from '@angular/core';

@ViewChildren('collapsePanel') collapsePanels: QueryList<ElementRef>;

toggleCollapse(index: number) {
  const panelElement = this.collapsePanels.toArray()[index].nativeElement;
  panelElement.classList.toggle('in');
}

核心原因是：Bootstrap的JS是在页面初始加载时，给所有带data-toggle的元素绑定点击事件，但*ngFor是Angular组件初始化后才动态渲染到DOM里的，这些动态生成的元素不会被Bootstrap自动绑定事件，所以点击按钮毫无反应。另外Angular的变更检测和jQuery的DOM操作也容易出现状态不同步的问题。

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