Necesito abrir el menú contextual de PrimeNG en la tabla usando el botón y haciendo clic con el botón derecho. Encontré el método 'alternar' y 'mostrar' en el componente para abrir el menú, pero no está abierto. Cuando llamo al método, establezco una nueva posición para el menú, pero una propiedad 'mostrar' todavía tiene un 'ninguno', pero con una nueva posición. Para obtener un componente 'contextMenu' de la plantilla en mecanografiado, uso ViewChild de Angular.
Agregue un menú contextual y un evento de clic en un botón/span/div/etc que haga referencia a la variable local (cm en este ejemplo) y llame a la función mostrar o alternar.
<p-contextMenu #cm [model]="items"></p-contextMenu> <button (click)="cm.show($event);$event.stopPropagation();">Show context</button>Siéntase libre de pasar esto a una función que lo manejará:
(click)="showContext(cm, $event)"En el TS:
showContext(cm: ContextMenu, event :MouseEvent) { cm.show(event); event.stopPropagation(); }Lo más importante que parece ser necesario (al menos en PrimeNG 7) es event.stopPropagation(). Sin él, si ve el DOM, verá que el menú contextual reacciona al evento show() pero la pantalla permanece como none.
La otra cosa importante es pasar el evento del mouse en el show () que permite que el menú contextual aparezca donde está el cursor; de lo contrario, aparece en otra parte de la página.
Si intenta llamar al show/toggle puramente a través del código y usa ViewChild sin que ocurra un evento de clic, puede intentar editar manualmente el estilo y cambiar la pantalla: ninguno a una pantalla: bloque (como se detalla en el comentario de Y. Tarion )
Puede abrir programáticamente un contextMenu PrimeNG pero es un poco complicado.
Su ContextMenu en su plantilla:
<p-contextMenu #cm [global]="true" [model]="items"></p-contextMenu> En su botón: (click)="toggle($event)"
En su texto mecanografiado, aquí hay un ejemplo del método de alternar:
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); } } Donde cm es tu ContextMenu
@ViewChild("cm") cm:ContextMenu;O bien, existe una alternativa del ContextMenu para este caso de uso: el menú escalonado de PrimeNG