events - page - title angular

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

Question

algunas de las funciones de mi componente se activan o desactivan según el tamaño del navegador, por lo tanto, quiero verificar el ancho del navegador en el evento de cambio de tamaño, sin embargo, puedo hacerlo utilizando el método On Init, pero necesito actualizar el navegador cuando se cambie el tamaño para actualizar el ancho del navegador

 ngOnInit() {
     if (window.innerWidth <= 767){
       ---- do something
      }
   }

Sin embargo, traté de usar el método OnChanges pero tampoco funciona

OnChanges(changes:SimpleChanges){
console.log( ''width:====>'' + changes[window.innerWidth].currentValue);
  if ( changes[window.innerWidth].currentValue <= 767 ){
      ---- do something
}

}

¿Hay alguna sugerencia o forma alternativa de lograr esto?

Answer 1

Puede colocar el controlador en el evento de cambio de resize sobre el objeto de la window , pero esto le permitirá colocar solo un evento de cambio de resize único, el último evento registrado en onresize funcionará.

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 anguloso, use @HostListener(''window:resize'') dentro de su componente, que le permitirá llamar a su función de redimensionamiento (en la cual se ha montado el decorador HostListner ) para resize el resize de la ventana.

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

Answer 2

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

<div class="some-class" (window:resize)="onResize($event)">...</div>

Luego, en su archivo .ts puede simplemente agregar:

onResize(event) {

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

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

Agregue esto fuera de ngOnInit() {} menos que desee el tamaño de la ventana en la carga de la página.

Cuando redimensionas tu ventana, verás la console.log

Answer 3

Utilice HostListener. Probablemente debería rebotar el evento de cambio de tamaño, sin embargo, antes de hacer nada, se activará cada vez que el tamaño cambie, 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);
    }
}