Angular 中的自定义上下文菜单

Question

我正在尝试创建一个 - 看似简单 - 的东西 - 我希望能够创建一个自定义上下文菜单，显示 "X," 作为我页面上某些元素的删除选项.理想情况下，我会使用外部库来实现此功能，而不是自己编写另一个组件，因为我试图将这个项目缩减为一个组件文件（由于我没有时间提出这个问题）。

我已经尝试过看起来完美的库：https://github.com/isaacplmann/ngx-contextmenu，但它没有按预期工作。

菜单看起来很破损，无法使用，如下所示：

附加到 X 的 (execute) 事件从未触发，菜单显然没有按预期显示。如果有人知道为什么这不起作用，这是我目前使用的代码：

菜单附加到的元素：

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

菜单本身：

<context-menu #deleteMenu>
    <ng-template contextMenuItem (execute)="print('click')">X</ng-template>
</context-menu>

打印功能（只是一个日志到控制台）

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

这个 ngx-context-menu 组件似乎没有很多支持，所以我有兴趣尝试其他方法。所以我想问大家的问题是：

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

或

2) 你知道如何将 Angular Material md-menu 触发器更改为右键单击而不是左键单击吗？（在这种情况下我可以使用 Angular Material 的 md-menu 吗？）

谢谢！拉斯

Answer 1

使用此代码 (execute)="console.log('click')" 您的处理程序将无法工作，因为在模板中，您只有模板范围可用（不是全局范围，但 console 在全局范围内）
所以你需要从你的组件中调用一个函数，比如
(execute)="functionFromComponent('click')"

至于angular material：您可以通过以下方式添加手动触发器：

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

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

然后绑定someMethod()一个普通的点击事件（并过滤掉右键点击）

另请参阅：https://material.angular.io/components/menu/overview

Angular 中的自定义上下文菜单

Custom context menu in Angular

contextmenu

angular-material

angular