Angular 中的自定义上下文菜单

Question

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

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

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

附加到 X 的（执行）事件永远不会触发，并且菜单显然没有按预期显示。如果有人对这不起作用的原因有所了解，这是我目前正在使用的代码：

菜单附加到的元素：

<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 菜单？）

谢谢！ 拉尔斯

Answer 1

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

至于角材料：您可以通过这种方式添加手动触发器：

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

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

然后将someMethod()绑定到正常的点击事件（并过滤掉右键点击）

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