Angular 显示自定义上下文菜单时出现问题

基本上，我有一个自定义的上下文菜单组件，我希望它在用户右键单击某个组件时显示出来

我已经实现了基本功能，将

ElementRef

传递到上下文菜单，并添加一个自定义事件处理程序来处理显示光标旁边的上下文菜单

我可以看到，由于

$event.preventDefault（）

，事件正在被触发，并且正常浏览器上下文菜单未打开，但我的上下文菜单未按预期显示。应设置布尔值，以便模板中的

*ngIf

计算结果为

true

属性的直接公共访问器也给我带来了相同的结果

---

要创建动态组件，您需要与Angular对话。 玩了一会儿你的闪电战

顺便说一句，我建议使用一些组件例如

---

问题与名称

此

的解决方式有关。此时，当调用

onContextMenu

方法时，

此

不会解析为

AppContextMenuComponent

类（如您所料）。要查看此操作，请尝试在该方法中的某个位置插入

console.log（this）

。由于

此

未按预期解决，因此赋值语句

此。_isOpen=true

未按您的要求执行。对此的一个快速修复方法是通过将事件侦听器设置更改为：

.addEventListener('contextmenu', this.onContextMenu.bind(this));
//                                                 ^^^^^^^^^^^

但是，当您希望以后删除此事件侦听器时，这可能会导致问题。其他人可能对此有更好的解决方案，但其中一个选择是使用箭头函数代替方法（请注意，这依赖于，它不是ES6的一部分）

以下是这种变化的情况：

private onContextMenu = ($event: MouseEvent): void => {
  //                  ^                            ^^
  // Body remains unchanged
};

---

这是一张有零钱的支票。

啊，非常感谢，我没有检查这张支票，所以我真的不知道发生了什么。谢谢，这看起来很有趣。是的，我以后肯定会使用菜单组件来实现上下文菜单的功能。