El estado de mi código actual es así:
<mat-tree-node> ... <div *ngIf="node.type=='assembly' || node.type=='part'" style="display: inline;" (contextmenu)="asmStateServ.contextMenu($event, node.name)">{{node.instanceName}} ({{node.name}}) <div class="customContext" (click)="asmStateServ.stopPropagation($event)" #menu> <ul> <li (click)="asmStateServ.selectNode(node.name)">Select</li> <li (click)="asmStateServ.deSelectNode(node.name)">Deselect</li> </ul> </div> </div> </mat-tree-node>En el archivo .ts, es esto:
@ViewChild('menu') menu: ElementRef public contextMenu(event: MouseEvent, node: asmTreeNode | asmTreeNodeFlat | asmTreeNodeScene) { event.preventDefault(); this.menu.nativeElement.style.display = "block"; this.menu.nativeElement.style.top = event.pageY + "px" this.menu.nativeElement.style.left = event.pageX + "px" } public disappearContextMenu() { this.menu.nativeElement.style.display = "none"; } public stopPropagation(event: any) { event.stopPropagation(); }Sin embargo, el menú no se abre y ese error específico de la consola permanece. Me preguntaba qué podría estar mal en este caso. Soy muy nuevo en Angular y en programación en general, por lo que significaría mucho para mí si escribes el código correcto :)
Puede agregar verificación nula (?) Antes de su nativeElement
this.menu?.nativeElement?.style.display = "none";Está intentando usar @ViewChild en la propiedad asmStateServ , que supongo por el nombre es un servicio inyectado. @ViewChild('menu') solo funciona en los inicializadores de propiedad de la clase de componente, no dentro de un servicio inyectado. Sin embargo, puede pasar fácilmente este elemento como parámetro a estos métodos. Tenga en cuenta que esto pasa un HTMLDivElement no un ElementRef .
Solo estoy mostrando las partes relevantes aquí.
<mat-tree-node> ... <div (contextmenu)="asmStateServ.contextMenu($event, menu)"> ... <div #menu>...</div> </div> </mat-tree-node> public contextMenu(event: MouseEvent, menu: HTMLDivElement) { event.preventDefault(); menu.style.display = "block"; menu.style.top = event.pageY + "px" menu.style.left = event.pageX + "px" }