web-dev-qa-db-fra.com

comment je peux détecter la fenêtre redimensionner instantanément dans angular 2?

certaines fonctionnalités de mon composant, activées ou désactivées, dépendent de la taille du navigateur. Par conséquent, je souhaite vérifier la largeur du navigateur lors d'un événement de redimensionnement. Toutefois, je pourrais le faire à l'aide de la méthode On Init, mais il me faut rafraîchir le navigateur lorsque le redimensionnement est arrivé pour mettre à jour la largeur du navigateur.

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

cependant, j'ai essayé d'utiliser la méthode OnChanges, mais cela ne fonctionne pas non plus.

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

}

y a-t-il des suggestions ou des moyens alternatifs pour accomplir ceci?

eventsangular
23
kero

Vous pouvez simplement mettre le gestionnaire sur resize événement sur window objet, mais cela vous permettra de ne mettre qu'un seul événement resize, le dernier événement enregistré sur onresize travail.

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);
        });
    };
}

Pour le rendre plus angular, utilisez @HostListener('window:resize') à l'intérieur de votre composant, ce qui permettra d'appeler votre fonction de redimensionnement (sur lequel HostListner décorateur a été monté) sur resize de la fenêtre.

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

Utilisez HostListener. Vous devriez probablement annuler l'événement de redimensionnement, mais avant de faire quoi que ce soit, il se déclenche à chaque fois que la taille change, ce qui peut être des dizaines ou des centaines de fois en quelques millisecondes lorsque l'utilisateur déplace la taille de la fenêtre.

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);
    }
}
19
Alex Egli

Une méthode plus simple consisterait à utiliser la méthode resize sur le bloc html que vous souhaitez détecter:

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

Ensuite, dans votre fichier .ts, Vous pouvez simplement ajouter:

onResize(event) {

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

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

Ajoutez ceci extérieur de la ngOnInit() {} à moins que vous ne vouliez que la taille de la fenêtre se charge.

Lorsque vous redimensionnez votre fenêtre, vous verrez le console.log

6
Nosniw