我正在尝试在下面的Angular App中添加一个引导手风琴:
<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
但是,当我单击一个手风琴标题时,什么也不会发生。有人可以告诉我我想念哪个设置?非常感谢!
您正在使用Bootstrap的"平原"版本。
-
确保您已将Bootstrap样式添加到您的应用程序中的
styles.css
或style.scss
文件中:CSS版本
@import '~bootstrap/dist/css/bootstrap.min.css';
SCSS版本
@import "~bootstrap/scss/bootstrap";
-
将
AccordionModule
从ngx-bootstrap
导入到您的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>
仅打开一个手风琴
要仅打开一个手风琴,您需要将属性closeOthers
添加到父组件accordion
:
<accordion [isAnimated]="true" [closeOthers]="true">
<!-- ... -->
</accordion>
尝试此命令,
npm install bootstrap@4 jquery --save
编辑 angular.json 文件修改"style":["put here your bootstrap.css file "]
&amp;"script":["put here 1st jquery path and then bootstrap.js path"]