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

【问题标题】：Bootstrap dropdown as context menu in Angular 4 applicationBootstrap 下拉菜单作为 Angular 4 应用程序中的上下文菜单
【发布时间】：2017-10-28 09:05:36
【问题描述】：

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

Bootstrap 文档说您可以通过调用从 JavaScript 切换下拉列表：

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

所以我尝试在 contextmenu 事件处理程序中执行此操作，但它不起作用。我总是收到一条错误消息：

...下拉菜单不是函数

我也尝试直接在 @ViewChild() 的 ElementRef 的本机元素上调用 dropdown() 函数，但我得到了同样的错误。

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

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

【问题讨论】：

是的，我已经按照 Bootstrap 文档的建议从 CDN 加载了它们。
我认为最好不要将 jQuery 与 Angular 混合使用。为什么不想使用ngx-bootstrap？
我说过同样的话，jQuery 和 Angular 会导致显示问题，仅使用 Angular 就很容易。创建一个 closedMenu 和 closedSubMenu（如果你想要手风琴菜单）并使用类装饰器 :)
我尽量避免使用 jQuery，但它在示例中，所以我尝试了它。当我尝试执行this.dropdownToggle.nativeElement['dropdown']() 时它也不起作用，其中dropdownToggle 是切换元素上的模板变量。这应该相当于jQuery调用，还是不？
我不想使用ngx-bootstrap，因为它太大了，我不需要它提供的大部分功能。但我已经尝试过了，BsDropdownDirective 在这里也不起作用。当我通过@ViewChild(BsDropdownDirective) 引用它时，当我尝试从上下文菜单事件处理程序访问它时，变量是undefined。我已经向我的应用程序的核心模块添加了一个导入，所以我现在不知道这里出了什么问题。

标签： angular contextmenu bootstrap-4

【解决方案1】：

您要实现的目标可能太复杂，无法切换下拉菜单，但要容易得多：

你为什么不添加一个 [class.hidden]="menuClosed" 之类的：

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

只需在切换函数中将 menuClosed 变量设置为 true 或 false，它就可以完成这项工作。

编辑：Angular 2+ 最酷的地方在于，您可以使用这种显示规则快速重现 jQuery/Javascript 行为

【讨论】：

当然，但是我必须处理样式、模糊事件等，这只会使我的组件变得混乱。 Bootstrap 为下拉菜单提供了简单易用的解决方案。我只是不明白为什么不能轻松地将它绑定到 contextmenu 事件。
我明白，是的，这是可能的，但 jQuery 不应该在 Angular 项目中使用，因为我已经遇到了奇怪的组件行为。但是如果你真的需要 jQuery，那么首先检查每个链接 () 上的 data-toggle="dropdown" 属性，然后你应该可以 $('.dropdown-toggle').dropdown();在这种情况下，打开菜单的操作由 jquery 管理。确保在脚本中导入了 jquery 和 javascript 库。 w3schools.com/bootstrap/…

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

您需要在 ViewChild 选项中将其强制转换为 NgbDropdown（idk 来自哪个 ngVersion 支持...）：

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

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

【讨论】：