Angular

Question

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

我已经尝试了一个看似完美的库：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）您是否知道任何其他自定义菜单组件库可以很好地实现此目的？

OR

2）您是否知道如何更改Angular Material md-menu触发器以右键单击而不是左键单击？ （这允许我在这种情况下使用Angular Material的md-menu？）

谢谢！ 拉斯

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