如何在Angular 4结合Bootstrap 4中使用Collapse与Accordion？

嘿，作为Angular 4新手，用Bootstrap 4搭折叠和手风琴组件确实容易碰到小问题！我先把你的代码补全，再给你讲清楚关键要点，还有两种不同的实现方式供你选择～

方式一：原生Bootstrap 4实现（依赖jQuery） #

首先，先把你没写完的代码补全成可运行的手风琴结构：

<div id="accordion">
  <!-- 第一个折叠面板 -->
  <div class="card">
    <div class="card-header text-white bg-primary">
      <a class="card-link text-white" data-toggle="collapse" href="#collapseOne">
        List
        <i class="float-right fa fa-caret-down"></i>
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-parent="#accordion">
      <div class="card-body">
        这里是折叠面板的内容，比如你可以放列表：
        <ul class="list-unstyled">
          <li>用户列表项1</li>
          <li>用户列表项2</li>
          <li>用户列表项3</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 第二个折叠面板（手风琴效果） -->
  <div class="card mt-2">
    <div class="card-header text-white bg-primary">
      <a class="collapsed card-link text-white" data-toggle="collapse" href="#collapseTwo">
        更多设置
        <i class="float-right fa fa-caret-right"></i>
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-parent="#accordion">
      <div class="card-body">
        这是第二个折叠面板的内容，手风琴模式下打开这个会自动关闭上一个面板
      </div>
    </div>
  </div>
</div>

关键配置步骤 #

1. 安装依赖：在终端执行命令安装Bootstrap 4、jQuery和Popper.js（Bootstrap的JS依赖这两个）：

npm install bootstrap@4 jquery popper.js --save

2. 配置Angular CLI：打开angular-cli.json文件，在styles数组里添加Bootstrap的CSS，在scripts数组里添加需要的JS文件：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "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. Font Awesome图标说明：你代码里用到了Font Awesome图标，要是还没引入的话，可以通过npm安装后加到styles里：

npm install font-awesome --save

然后在angular-cli.json的styles里加一行：

"../node_modules/font-awesome/css/font-awesome.min.css"

方式二：用ng-bootstrap（更Angular化，无jQuery依赖） #

如果不想依赖jQuery，推荐用ng-bootstrap，它是专门为Angular打造的Bootstrap组件库，完全符合Angular的开发习惯。

配置步骤 #

1. 安装对应版本：Angular 4需要安装ng-bootstrap 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. 使用手风琴组件：写起来更简洁，不用手动管理data-toggle和data-parent：

<ngb-accordion #accordion="ngbAccordion" activeIds="panel-1" [closeOthers]="true">
  <ngb-panel id="panel-1" title="List">
    <ng-template ngbPanelContent>
      <ul class="list-unstyled">
        <li>用户列表项1</li>
        <li>用户列表项2</li>
        <li>用户列表项3</li>
      </ul>
    </ng-template>
  </ngb-panel>
  <ngb-panel id="panel-2" title="更多设置">
    <ng-template ngbPanelContent>
      这是第二个面板的内容，`[closeOthers]="true"`开启手风琴效果
    </ng-template>
  </ngb-panel>
</ngb-accordion>

两种方式都能实现你想要的折叠和手风琴效果，新手可以先从原生Bootstrap方式入手，熟悉后再尝试ng-bootstrap的方案哦！

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