Bootstrap 下拉菜单作为 Angular 4 应用程序中的上下文菜单

Question

有没有一种简单的方法如何在不使用 ngx-bootstrap 库的情况下在 Angular 4 应用程序的上下文菜单事件上切换 Bootstrap 4 下拉菜单？

Bootstrap 文档说您可以通过调用 JavaScript 切换下拉菜单：

$('.dropdown-toggle').dropdown()

所以我尝试在上下文菜单事件处理程序中执行此操作，但没有成功。我总是收到一条错误消息：

...dropdown is not a function

我还尝试直接在从 @ 获得的 ElementRef 的原生元素上调用 dropdown() 函数ViewChild() 但我得到同样的错误。

问题出在哪里？我可以通过使用数据属性来切换下拉列表（所以我假设 Bootstrap 脚本在这里工作）但是不可能以这种方式在上下文菜单上切换它，是吗？

我更喜欢没有任何外部库的解决方案。

Answer 1

您想要实现的可能对于切换下拉菜单来说太复杂了，有更简单的方法：

你为什么不添加一个 [class.hidden]="menuClosed" 比如：

<div [class.hidden]="menuClosed" class="dropdown"> ?

只需在切换函数中将 menuClosed 变量设置为 true 或 false 即可完成工作。

编辑：Angular 2+ 很酷的一点是，您可以使用这种显示规则

快速重现 jQuery/Javascript 行为

Answer 2

我终于意识到只显示 Bootstrap 下拉菜单是不够的，我还想将上下文菜单放在我单击的位置，但不想自己实现。

这就是我决定使用 ngx-contextmenu 的原因，尽管我之前提到过我不想使用任何外部库。它很容易设置，并且还利用了 Bootstrap 下拉样式，这是我首先想要完成的。

如果有人想使用这个库，请注意 this bug 在哪些情况下上下文菜单目前默认不显示。

Answer 3

您不能在 ElementRef 上调用下拉方法。

您需要在 ViewChild 选项中将其转换为 NgbDropdown（支持此 ngVersion 的 idk...）：

@ViewChild('ngbDropdownTemplateVarName', {read: NgbDropdown})

然后您可以将其用作下拉菜单，而不是仅提供 HTML 项的 ElementRef。

Bootstrap dropdown as context menu in Angular 4 application