angular primeng 如何在左键单击时显示上下文菜单答案

【问题标题】：angular primeng how to display context menu on left clickangular primeng 如何在左键单击时显示上下文菜单
【发布时间】：2018-01-29 15:26:13
【问题描述】：

我是 angular2/primeng 的新手。

如何在左键单击而不是默认右键单击数据表时显示primeng上下文菜单？

谢谢

【问题讨论】：

目前还没有这样的选项，为此您必须在库的组件中进行更改，或者您必须创建自定义的组件

标签： angular2-directives primeng-datatable

【解决方案1】：

您可能需要重新考虑为什么要像这样更改默认设置。右键单击几乎是人们期望上下文菜单工作的通用方式。正如 Pardeep 所说，除了扎根于代码之外，您将无法更改它。

【讨论】：

【解决方案2】：

从 PrimeNG 6.1.4 版本开始，可以使用triggerEvent 属性来完成。

在模板上：

<img #targetImage2 src="assets/img/vejo_trabalhos_bonitos.jpg" alt="Test image">
<p-contextMenu [target]="targetImage2" [model]="contextMenuItems" [appendTo]="'body'" triggerEvent="click"></p-contextMenu>

在组件上：

contextMenuItems: MenuItem[];

constructor(private messageService: MessageService) { }

ngOnInit(): void {
  this.contextMenuItems = [
    { label: 'Edit', icon: 'pi pi-fw pi-pencil', command: event => this.displayMessage(event.item.label) },
    { label: 'Export', icon: 'pi pi-fw pi-external-link', command: event => this.displayMessage(event.item.label) },
    { label: 'Delete', icon: 'pi pi-fw pi-trash', command: event => this.displayMessage(event.item.label) }
  ];
}

displayMessage(action: string): void {
  this.messageService.add({severity: 'info', summary: `"${action}" action clicked!`});
}

但是如果想在鼠标左键和右键事件上都显示上下文菜单。也可以。

在模板上：

<img #targetImage src="assets/img/vejo_trabalhos_bonitos.jpg" alt="Test image" (click)="onLeftMouseClick($event,contextMenu)">
<p-contextMenu #contextMenu [target]="targetImage" [model]="contextMenuItems" [appendTo]="'body'"></p-contextMenu>

在组件上：

contextMenuItems: MenuItem[];

constructor(private messageService: MessageService) { }

ngOnInit(): void {
  this.contextMenuItems = [
    { label: 'Edit', icon: 'pi pi-fw pi-pencil', command: event => this.displayMessage(event.item.label) },
    { label: 'Export', icon: 'pi pi-fw pi-external-link', command: event => this.displayMessage(event.item.label) },
    { label: 'Delete', icon: 'pi pi-fw pi-trash', command: event => this.displayMessage(event.item.label) }
  ];
}

displayMessage(action: string): void {
  this.messageService.add({severity: 'info', summary: `"${action}" action clicked!`});
}

onLeftMouseClick(event: MouseEvent, contextMenu: ContextMenu): void {
  event.stopPropagation();
  event.preventDefault();
  contextMenu.show(event);
}

【讨论】：