Angular 2 Bootstrap（ngx-bootstrap / ng2-bootstrap）下拉菜單不起作用

Question

我似乎只能使Angular Bootstrap下拉列表在我的應用程序的一部分中工作。 我不確定為什么它在那里而不是在其他地方起作用。 在我的模塊中，我將使用BsDropdownModule.forRoot()導入，就像它可以正常工作一樣。 我已經嘗試從他們的幾個示例中粘貼HTML了。 我知道我以前在那里工作過，並且不記得更改任何與它有關的內容。

我沒有收到任何錯誤，也不確定如何繼續解決此問題。 我注意到ng2-bootstrap的問題，所以我升級到ngx-bootstrap。 同樣的問題。

Answer 1

確保您的Angular版本和Bootstrap版本兼容。 當我在ng2-bootstrap 1.6.x中使用Angular 4時發生了這種情況。 更好的是，您應該使用ngx-bootstrap而不是ng2-bootstrap。 要使下拉菜單正常工作，請添加container屬性：

<div class="btn-group" dropdown  container="body"></div>

Answer 2

我發現了問題。 下拉菜單實際上是有效的。 問題是由於某種原因，.dropdownMenu的y位置（頂部）將其放置在其所在容器的邊界之外，無法看到該容器。 我仍然不確定為什么會發生這種情況，但至少我有一些需要配合的地方。

Answer 3

我能夠使用bootstrap@4.0.0-alpha.5使它工作，但是當我切換到4.0.0-alpha.6時，我無法使用下拉菜單。 不知道出了什么問題，但是我不得不通過將BsDropdownModule添加到我的提供程序中來添加到上下文中（我已經有了BsDropdownModule.forRoot（））....（不確定到底我破壞了什么的細節）。

但是發現將BsDropdownModule添加到我在其中調用菜單的模塊中，然后它起作用了。

Answer 4

您需要在AppModule導入中添加BsDropdownModule.forRoot（），並在使用引導程序下拉菜單的子模塊中添加BsDropdownModule（不是.forRoot（）！）。