在Angular中自定义上下文菜单

我正在尝试创建一个看似简单的东西——我希望能够创建一个自定义上下文菜单，其中显示一个X，作为我页面上某些元素的删除选项。理想情况下，我会使用一个外部库来实现此功能，而不是自己编写另一个组件，因为我正试图将此项目保留为一个组件文件，原因是我没有时间回答这个问题

我已经尝试过一个看似完美的库，但它并没有达到预期的效果

菜单只是看起来有点不正常，就像这样：

附加到X的execute事件从不触发，并且菜单显然没有按预期显示。如果有人对这不起作用的原因有所了解，这就是我当前使用的代码：

菜单所附加到的元素：

<div 
    id="playhead"
    (mousedown)="movePlayheadByMouse()"
    [contextMenu]="deleteMenu"
>
     <span id="playhead-top">&#9930;</span>
     <div id="playhead-line"></div>
</div>

这个ngx上下文菜单组件似乎没有太多的支持，所以我有兴趣尝试其他方法。所以我想问大家的问题是：

1您是否知道任何其他自定义菜单组件库可以很好地用于此目的

或

2您知道如何将“角度材质md”菜单触发器更改为右键单击而不是左键单击吗？这将允许我在这种情况下使用Angular Material的md菜单

谢谢！ Lars

使用此代码execute=console.log“click”您的处理程序将不起作用，因为在模板中，您只有模板作用域而不是全局作用域，但console在全局作用域中 因此，您需要从组件调用函数，如 execute=functionFromComponent'click'

对于角度材质：您可以通过以下方式添加手动触发器：

class MyComponent {
  @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;

  someMethod() {
    this.trigger.openMenu();
  }
}

然后将someMethod绑定到普通的click事件并过滤掉右键单击

---

另请参见：

我不知道库，但是您是否尝试将输出绑定到组件中声明的函数？如果您引用的是附加到contextMenuItem的execute事件，则是。似乎事件已被正确绑定，但列表已被破坏，无法捕捉到对菜单项的单击。不知道。也许与鼠标有冲突。你是对的，这是一个错误的例子。我已经编辑了这个问题，但行为仍然存在。如果它试图调用console.log，它会给我一个错误，但它从来没有这样做，因为从来没有调用过execute事件。添加了对AngularMaterialWesome的建议，谢谢！不知道我怎么会在文件里漏掉这个。这对于将openMenu函数绑定到右键单击非常有用。然而，在接受之前我还有一个问题——在文档中，它说请注意，在这种情况下，仍然需要一个mdMenuTriggerFor指令来将菜单附加到DOM中的触发器元素。也就是说，我仍然需要绑定mdMenuTriggerFor，它默认为左键单击，我的菜单在左键单击和右键单击时弹出。你知道如何欺骗它，使菜单不会打开左键点击，只有右键点击？它应该防止默认的工作。因此，在捕捉点击事件时，您会说：click=someMethod$event，然后在someMethod中您会说：someMethodevent:MouseEvent{event.preventDefault；event.stopImmediatePropagation；event.cancleBubble=true；}这段特定的代码似乎不起作用，但我会处理它。谢谢

private print(val : string) : void
{
  console.log(val)
}

class MyComponent {
  @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;

  someMethod() {
    this.trigger.openMenu();
  }
}