如何将 Bootstrap Accordion 添加到 Angular 应用程序

Question

我正在尝试在下面的 Angular 应用程序中添加一个 Bootstrap Accordion：

<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 我引导

npm i ngx-bootstrap

但是当我点击其中一个手风琴标题时，什么都没有发生。 有人可以告诉我我缺少什么设置吗？非常感谢！

Answer 1

您使用的是“普通”版本的引导程序。

1. 确保您已将引导样式添加到全局 styles.css 或 style.scss 文件中的应用程序：

   CSS 版本

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

   SCSS 版本

   @import "~bootstrap/scss/bootstrap";

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

   import { AccordionModule } from 'ngx-bootstrap/accordion';
   
   @NgModule({
     imports: [AccordionModule.forRoot(),...]
   })
   export class AppModule{}
   

3. 使用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>
   

Install instructions for ngx-bootstrap

Accordion Component of ngx-bootstrap

添加动画

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

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

只打开一个手风琴

要只打开一个手风琴，您需要将属性closeOthers 添加到父组件accordion：

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

Answer 2

试试这个命令，

npm install bootstrap@4 jquery --save

编辑Angular.json文件后修改"style":["put here your bootstrap.css file "] & "script":["put here 1st jquery path and then bootstrap.js path"]