Bootstrap 手风琴切换问题

Question

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

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

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

Answer 1

根据 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步点赞并标记我的答案。 :)

Bootstrap 手风琴切换问题

Bootstrap accordion toggling issue

angular

bootstrap-5

bootstrap-accordion