如何将Bootstrap手风琴添加到Angular应用程序中

Question

我正在尝试将Bootstrap手风琴添加到下面的Angular应用程序中：

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Collapsible Group Item #1
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                Anim
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Collapsible Group Item #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
            Anim
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header" id="headingThree">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Collapsible Group Item #
                </button>
            </h5>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
            <div class="card-body">
                Anim
            </div>
        </div>
    </div>
</div>

在构建之前，我运行了以下NPM安装命令：

npm i bootstrap

npm i ngx-bootstrap

但是当我点击其中一个手风琴标题时，没有任何反应。 请问我缺失哪个设置的组件？非常感谢！

- user9847788

Answer 1

您正在使用“plain”版本的Bootstrap。

1. 确保在全局的styles.css或style.scss文件中添加了Bootstrap样式：

   CSS版本

   @import '~bootstrap/dist/css/bootstrap.min.css';

   SCSS版本

   @import "~bootstrap/scss/bootstrap";

2. 从ngx-bootstrap导入AccordionModule到您的AppModule中。

import { AccordionModule } from 'ngx-bootstrap/accordion';

@NgModule({
  imports: [AccordionModule.forRoot(),...]
})
export class AppModule{}

请使用在ngx-bootstrap中提供的组件，而不是"普通"的HTML版本：

<accordion>
  <accordion-group heading="Static Header">
    This content is straight in the template.
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
  <accordion-group heading="Another group">
    <p>Some content</p>
  </accordion-group>
</accordion>

ngx-bootstrap安装指南

ngx-bootstrap的手风琴组件

添加动画

要添加动画，您需要将属性isAnimated添加到父组件accordion中：

<accordion [isAnimated]="true">
<!-- ... -->
</accordion>

仅展开一个手风琴

要仅展开一个手风琴，您需要在父组件accordion中添加属性closeOthers：

<accordion [isAnimated]="true" [closeOthers]="true">
<!-- ... -->
</accordion>

- Adrian

---

谢谢你的回答。我已经按照你的建议更新了我的代码，手风琴现在可以打开和关闭了。但是过渡效果不如这里所示的手风琴那么流畅：https://getbootstrap.com/docs/4.1/components/collapse/ - user9847788

另外，在上面链接中的手风琴 - 如果您打开一个手风琴，所有其他手风琴都会关闭。而使用您的代码，如果您打开一个手风琴，则此时打开的任何手风琴仍然保持打开状态。 - user9847788

请查看我的更新答案。我建议您查阅ngx-bootstrap手风琴的文档以了解更多信息。 - Adrian

Answer 2

尝试使用这个命令，

npm install bootstrap@4 jquery --save

编辑 Angular.json 文件后，修改 "style":["在此处放置您的bootstrap.css文件"] 和 "script":["首先放置第一个jquery路径，然后放置bootstrap.js路径"]

- Shubham