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（）！）。