¿Cómo puedo detectar el cambio de tamaño de la ventana al instante en angular 2?

No dudes en compartir nuestros tutoriales y códigos en tus redes sociales, ayúdanos a ampliar esta comunidad.

Solución:

Podrías simplemente poner el controlador en resize evento terminado window objeto, pero esto le permitirá poner solo resize evento, último evento registrado en onresize trabajará.

constructor(private ngZone:NgZone) 
    window.onresize = (e) =>
    
        //ngZone.run will help to run change detection
        this.ngZone.run(() => 
            console.log("Width: " + window.innerWidth);
            console.log("Height: " + window.innerHeight);
        );
    ;

Para hacerlo más angular usa @HostListener('window:resize') dentro de su componente, lo que permitirá llamar a su función de cambio de tamaño (en la que HostListner el decorador ha sido montado) en resize de ventana

@HostListener('window:resize', ['$event'])
onResize(event)
   console.log("Width: " + event.target.innerWidth);

Utilice HostListener. Sin embargo, probablemente debería eliminar el evento de cambio de tamaño antes de hacer nada, se activará cada vez que cambie el tamaño, lo que podría ser docenas o cientos de veces en unos pocos milisegundos a medida que el usuario arrastra el tamaño de la ventana.

import  Component, HostListener  from '@angular/core';

@Component(...)
class TestComponent 
    @HostListener('window:resize')
    onWindowResize() 
        //debounce resize, wait for resize to finish before doing stuff
        if (this.resizeTimeout) 
            clearTimeout(this.resizeTimeout);
        
        this.resizeTimeout = setTimeout((() => 
            console.log('Resize complete');
        ).bind(this), 500);
    

Una forma más fácil sería usar el método de cambio de tamaño en el bloque html que desea detectar:

...

Entonces en tu .ts archivo que puede simplemente agregar:

onResize(event) 

   const innerWidth = event.target.innerWidth;
   console.log(innerWidth);

   if (innerWidth <= 767) 
      ...do something
   

Agrega esto fuera de del ngOnInit() a menos que desee el tamaño de la ventana en la carga de la página.

Cuando cambie el tamaño de su ventana, verá el console.log

Recuerda algo, que puedes optar por la opción de reseñar tu experiencia si descubriste tu aprieto .

---

---

Utiliza Nuestro Buscador