Tengo una "ventana emergente" que muestra datos recuperados de una base de datos en mousemove y aparece en la ubicación del mouse. Se parece a esto:
<div (mousemove)="onMouseMove($event)></div> onMouseMove(event: MouseEvent) { this.xCoord = event.x this.yCoord = event.y } <div [style.left.px]="xCoord" [style.top.px]="yCoord" class="popup"> ... </div>Debido a que las dimensiones de la ventana emergente son dinámicas, según su contenido, necesito recuperar las dimensiones para que la ventana emergente se coloque correctamente (sobre el objetivo y centrada horizontalmente). ¿Es posible en Angular 2 obtener propiedades de estilo de un elemento sin, por ejemplo, un evento de mouse? Idealmente, las dimensiones se asignan a una variable cuando aparece la ventana emergente.
¿Por qué no usa Javascript básico para acceder a las propiedades de ancho y alto del elemento DOM, así:
JavaScript:
getPopupDimentions() { let myElement = getElementById("myPopup"); return { width: myElement.style.width, height: myElement.style.height } }HTML:
<div [style.left.px]="xCoord" [style.top.px]="yCoord" class="popup" id="myPopup"> ... </div>Por supuesto, el Javascript que publiqué anteriormente deberá llamarse una vez que se haya iniciado la ventana emergente.
Si quisiera un enfoque más angular , le recomendaría usar View Child, así:
JavaScript:
Asegúrese de importar ViewChild import { Component, ViewChild } from '@angular/core'
@ViewChild('mypopup') mypopup; getPopupDimentions() { return { width: this.mypopup.nativeElement.style.width, height: this.mypopup.nativeElement.style.height } }HTML:
<div [style.left.px]="xCoord" [style.top.px]="yCoord" class="popup" #mypopup> ... </div>Si desea obtener más información sobre los niños de la vista Angular, le recomiendo consultar esta pregunta y sus respuestas .