引导手风琴切换问题

Question

嗨，我在angular中使用引导手风琴，切换不发生参考创建的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。

应该而不是使用普通的引导和插入一个脚本标记。Angular使用阴影dom和许多优化的魔法来提高应用的性能。使用框架中没有涵盖的脚本会使它们变慢，因为它们没有使用angular的变化检测、dom阴影等。

所以在你的例子中，你已经集成了ngx-bootstrap (npm install the stuff, add the module to your 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找到你的组件并将手风琴添加到你的模板中，就像我上面写的<accordion…>

步骤4投票并标记我的答案。:)