Bootstrap 手风琴切换问题

Bootstrap accordion toggling issue

您好,我在 angular 中使用 bootstrap 手风琴,对于参考创建的 stackblitz,切换没有发生,无法找到切换引起的问题

https://stackblitz.com/edit/angular-jbaonj?file=src%2Findex.html

https://stackblitz.com/edit/angular-jbaonj?file=src%2Findex.html

根据 ngx-bootstrap 文档,使用手风琴的正确方法 是这样的:

<accordion [isAnimated]="true">
  <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>

但是您没有使用 angular 组件,而只使用了 类。请使用文档中所述的正确组件/指令。

编辑参考评论:

如果您想在 angular 项目中使用 bootstrap javascript 功能,您应该为此使用专用端口,例如 ng-bootstrap 或 ngx-bootstrap .

您应该使用普通的bootstrap并插入脚本标签。 Angular 使用 shadow dom 和大量优化魔法来提高应用程序的性能。使用框架中未涵盖的脚本会使它们变慢,因为它们没有使用 angulars 更改检测、dom 阴影等

因此在您的情况下,您已经集成了 ngx-bootstrap(npm 安装这些东西,将模块添加到您的 AppModule)。集成后,您可以像我上面提到的那样在模板中使用 ngx-bootstrap 组件。

编辑 2 因为我是个好人:

您已经在原来的 stackblitz 中添加了 ngx-bootstrap,但在当前的 stackblitz 中删除了它。 所以 ngx-bootstrap 看这里:https://valor-software.com/ngx-bootstrap/#/documentation#getting-started

第 1 步将 ngx-bootstrap 添加到您的项目

ng add ngx-bootstrap

第2步在app.module.ts

的imports数组中添加你要使用的模块
//...
imports: [
    AccordionModule.forRoot()
]

第 3 步转到您的组件并将手风琴添加到您的模板,就像我在上面写的那样

第4步点赞并标记我的答案。 :)