Question

我需要使用按钮并使用右键单击context menu中的PrimeNG打开table。我发现方法'切换'和'显示'到component打开菜单，但它没有打开。当我调用方法时，我为菜单设置新位置，但属性'display'仍然有'none'，但是有一个新位置。为了从typescript中的模板获取组件“contextMenu”，我使用Angular的ViewChild。

Answer 1

您可以以编程方式打开一个contextMenu PrimeNG，但这有点棘手。

您的模板中的ContextMenu：

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

在按钮上：(click)="toggle($event)"

在您的打字稿上，这里是toggle方法的示例：

  toggle(event){
    if(!this.cm.containerViewChild.nativeElement.style.display ||
      this.cm.containerViewChild.nativeElement.style.display == 'none') {
      //Open contextual menu
      setTimeout(() => {
        this.cm.position(event);
        this.cm.containerViewChild.nativeElement.style.display = 'block';
        this.cm.containerViewChild.nativeElement.style.visiblility = 'visible';
      }, 0);
    }else{
      //close contextual menu
      setTimeout(() => {
        this.cm.containerViewChild.nativeElement.style.display = 'none';
      }, 0);
    }
  }

cm是您的ContextMenu

@ViewChild("cm") cm:ContextMenu;

或者，对于此用例，它是ContextMenu的替代方法：PrimeNG's tiered menu

Answer 2

在按钮/ span / div / etc上添加上下文菜单和click事件，这些事件引用局部变量（在此示例中为cm）并调用show或toggle函数。

<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（）事件作出反应，但显示保持为空。

另一个重要的事情是在show（）中传递鼠标事件，该事件使上下文菜单出现在光标所在的位置，否则它将出现在页面的其他位置。

如果仅尝试通过代码并使用ViewChild来调用show / toggle，而没有发生click事件，则可以尝试手动编辑样式并将display：none更改为display：block（如注释Y. Tarion）

从代码Angular 2中打开PrimeNG的上下文菜单

2 个答案: