He estado tratando de crear un menú contextual que se activa cada vez que hace clic en el nodo de un árbol (en mat-tree-node) con opciones de seleccionar/deseleccionar cuyas funcionalidades simplemente resaltarían el nodo en negrita. Estaba usando el menú mat y esto es lo que hice hasta ahora.

 <p *ngIf="node.type=='assembly' || node.type=='part'" style="display: inline;" (contextmenu)="asmStateServ.onContextMenu($event, node.guid)">{{node.instanceName}} ({{node.name}})</p> <mat-menu #contextMenu="matMenu"> <ng-template matMenuContent let-node="node.guid"> <button mat-menu-item (click)="asmStateServ.onContextMenuSelection(node.guid)">Action 1</button> <button mat-menu-item (click)="asmStateServ.onContextMenuDeselection(node.guid)">Action 2</button> </ng-template> </mat-menu>

Y para el archivo mecanografiado, esto es lo que hice.

 @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger; contextMenuPosition = { x: '0px', y: '0px' }; public onContextMenu(event: MouseEvent, node: asmTreeNodeFlat) { event.preventDefault(); this.contextMenuPosition.x = event.clientX + 'px'; this.contextMenuPosition.y = event.clientY + 'px'; this.contextMenu.menuData = { 'node': node }; this.contextMenu.menu.focusFirstItem('mouse'); this.contextMenu.openMenu(); } public onContextMenuSelection(item: asmTreeNodeFlat) { alert(`Selection for ${item.guid}`); } public onContextMenuDeselection(item: asmTreeNodeFlat) { alert(`For unselecting ${item.guid}`); }

El asmTreeNodeFlat es una estructura como esta:

 export class asmTreeNodeFlat { name: string; instanceName: string; guid: string; componentId: number; url: string; transform: any = []; data: any; level: number; expandable: boolean; type: string; decimation: number = 0; showInTreeView: boolean = true; expanded: boolean = false; }

El menú contextual predeterminado se ha bloqueado, el menú contextual personalizado no se activa. Me preguntaba cuál podría ser el problema y si pueden escribir el código correcto en la respuesta. Pido disculpas, es que soy muy nuevo en el desarrollo web.