angular - 通过 PrimeNG 从代码 Angular 2 打开上下文菜单

Question

我需要打开 context menu通过 PrimeNG 在 table使用按钮并使用右键单击。我在 component 中找到了方法“切换”和“显示”用于打开菜单，但未打开。当我调用该方法时，我为菜单设置了新位置，但是属性“显示”仍然具有“无”，但具有新位置。为了从 typescript 中的模板获取组件“contextMenu”，我使用 Angular 的 ViewChild。

Answer 1

在引用局部变量(本例中为 cm)并调用显示或切换函数的按钮/span/div/等上添加上下文菜单和点击事件。

<p-contextMenu #cm [model]="items"></p-contextMenu>

<button (click)="cm.show($event);$event.stopPropagation();">Show context</button>

随意将其传递给将处理它的函数:

(click)="showContext(cm, $event)"

在 TS 中:

showContext(cm: ContextMenu, event :MouseEvent) {
  cm.show(event);
  event.stopPropagation();
}

似乎是必要的最重要的事情(至少在 PrimeNG 7 上)是 event.stopPropagation()。没有它，如果您查看 DOM，您将看到上下文菜单对 show() 事件使用react，但显示保持为无。

另一个重要的事情是在 show() 中传递鼠标事件，它让上下文菜单出现在光标所在的位置，否则它会出现在页面的其他地方。

如果尝试纯粹通过代码调用 show/toggle 并使用 ViewChild 而没有发生点击事件，您可以尝试手动编辑样式并将 display:none 更改为 display:block(详见评论Y. Tarion)