css - 在 Angular 组件中使用 Bootstrap 组件

Question

我正在尝试将 Bootstrap 可折叠面板用于 Angular 组件。据我所见， Bootstrap 方法是使用面板的 id 来折叠。这是独立工作的，但是，当用于 Angular 组件时，相同的 id 在折叠和非折叠模式之间切换时会产生不良效果。 (总是第一个面板折叠/未折叠)

我的下一步是创建我的自定义折叠面板。这有效并且可以在这里看到plunker ，但折叠效果不一样(plunker 链接并行显示我的面板和 Bootstrap 面板)。

我的问题是如何在我的组件中使用 Bootstrap 面板，或者如何更改 css 以在折叠/取消折叠时具有相同的 Bootstrap 效果。 ？

 <custom-filter-accordion button-text="Expand / Collapse Non-BootStrap"></custom-filter-accordion>

Answer 1

You should definitely use Angular-ui's integration with bootstrap. For this specific purpose, they have a component called Collapse

他们已经有很多指令，你可以使用 angular 并且应该加快你的开发时间

Check this plunker