Verwenden Sie Bootstrap-Komponente in Winkelkomponente

Question

Ich versuche, eine bootstrap zusammenklappbare Panel in eine eckige Komponente zu verwenden. Aus dem, was ich gesehen habe, ist der Bootstrap-Ansatz, die ID des Panels zu verwenden, um zu kollabieren. Dies funktioniert jedoch als Stand-Alone-Funktion. Wenn Sie diese ID in einer Winkelkomponente verwenden, erzeugt diese ID einen unerwünschten Effekt beim Umschalten zwischen dem Reduzieren- und Nicht-Reduzieren-Modus. (immer das erste Panel ist kollabiert/nicht kollabiert)

Mein nächster Schritt war, meine benutzerdefinierte Kollapse zu erstellen. Dies funktioniert und kann hier plunker gesehen werden, aber der Kollaps-Effekt ist nicht der gleiche (der Plunker-Link zeigt parallel mein Panel und das Bootstrap-Panel).

Meine Frage ist, wie kann ich das Bootstrap-Panel in meine Komponente verwenden oder wie kann ich die CSS ändern, um den gleichen Bootstrap-Effekt auf Kollaps/Un-Kollaps zu haben. ?

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

Answer 1

Sie auf jeden Fall Angular-ui's integration with bootstrap verwenden sollten. Für diesen Zweck haben sie eine Komponente namens Collapse

Sie bereits viele Richtlinien, die Sie mit Winkel- und sollte beschleunigen Ihre Entwicklungszeit

Check this plunker