Question

我是angular2 / primeng的新手。

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

感谢

Answer 1

您可能想重新考虑为什么要更改默认值。右键单击几乎是人们期望Context Menus工作的通用方式。正如Pardeep所说，除了在代码中生根之外，你将无法改变它。

Answer 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);
}

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

2 个答案: