0
582
ViewsObtenga las dimensiones de una imagen después de que finalice el procesamiento, en Angular
Estoy tratando de obtener el tamaño renderizado de una imagen en un componente. Usando el evento (cargar), obtengo el tamaño de la imagen tal como se muestra en ese momento (foto 1) y el tamaño "final" después de que la página se muestra por completo. Supongo que puedo usar ngAfterViewChecked pero eso significaría que estoy constantemente calculando ese tamaño cuando la única instancia significativa es cuando la ventana se abre o cambia de tamaño
2 answers
Answer question0
- Un enfoque alternativo que puede usar es suscribirse a los cambios en
Window: resizeresize event usandoHostListenerpara calcular las dimensiones de la imagen, como se muestra en el siguiente fragmento de código.
import { HostListener } from '@angular/core'; @HostListener('window:resize', ['$event']) // Invoke function to compute the image dimensions here } Nota : también puede invocar la función para calcular las dimensiones de dicha imagen dentro del enlace del ciclo de vida AfterViewInit en lugar de en el evento de load .
- Otro enfoque es calcular las dimensiones de la imagen al escuchar los cambios en el evento
Window: resizeresize usandofromEvent, como se muestra en el fragmento de código a continuación.
import { fromEvent } from 'rxjs'; changeSubscription$: Subscription ngOnInit() { this.windowResizeEventChanges$ = fromEvent(window, 'resize').subscribe(event => { // Invoke function to compute the image dimensions here }); } ngOnDestroy() { this.windowResizeEventChangesn$.unsubscribe() // Unsubscribe to stop listening the changes in Window: resize } Lea más sobre fromEvent aquí .
0
Terminé usando un observador de mutaciones, observando los cambios de atributos, adjunto al elemento que contiene la imagen. En mi caso, es necesario un poco de gestión porque no solo se ejecuta una vez, sino que resuelve el problema.
ngAfterViewInit() { this.refElement = this.appsContainer.nativeElement.querySelector('item') as HTMLElement; const config = { attributes: true }; this.mutationObserver = new MutationObserver((mutation) => { const target = mutation[0].target as HTMLElement; //some code here to execute based on some conditions and to remove the observer } }); this.mutationObserver.observe(this.refElement, config);}