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步点赞并标记我的答案。 :)
您好,我在 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步点赞并标记我的答案。 :)