web-dev-qa-db-fra.com

Angular2 obtenir la largeur de la fenêtre onResize

Essayer de comprendre comment obtenir la largeur de la fenêtre lors du redimensionnement des événements dans Angular2. Voici mon code:

export class SideNav {

    innerWidth: number;

    constructor(private window: Window){

        let getWindow = function(){
          return window.innerWidth;
        };

        window.onresize = function() {
          this.innerWidth = getWindow();
          console.log(getWindow());
        };
}

J'importe le fournisseur de fenêtres de manière globale dans le fichier bootstrap.ts en utilisant supply pour accéder à la fenêtre de mon application. Le problème que je rencontre est que cela me donne une taille de fenêtre, mais lors du redimensionnement de la fenêtre, il répète simplement la même taille, même si la fenêtre change de taille. Voir l'image pour l'exemple de console.log: Capture d'écran image

Mon objectif général est de pouvoir définir le numéro de fenêtre sur une variable onresize afin de pouvoir y accéder dans le modèle. Des idées sur ce que je fais mal ici?

Merci!

csstypescriptangularangular2-directives
30
Spencer Bigum
<div (window:resize)="onResize($event)"

onResize(event) {
  event.target.innerWidth; 
}

pour être averti des événements de défilement d'un élément enfant dans un modèle de composants

ou écoutez l'élément de l'hôte de composants lui-même

@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth; 
}
53
Günter Zöchbauer

Utilisez NgZone pour déclencher la détection de changement:

constructor(ngZone:NgZone) {
    window.onresize = (e) =>
    {
        ngZone.run(() => {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
        });
    };
}
21
pixelbits

Dans ce cas, vous devez exécuter la détection des modifications manuellement. Lorsque vous modifiez une variable de composant à partir du contexte externe d’Anger, l’événement redimensionné n’obtient pas de correctif pour le singe par le système de détection de changement Angular2.

Code 

import {ChangeDetectorRef} from 'angular2/core'

export class SideNav {
    innerWidth: number;

    constructor(private window: Window, private cdr: ChangeDetectorRef){

       let getWindow = () => {
          return window.innerWidth;
       };

      window.onresize = () => {
          this.innerWidth = getWindow();
          this.cdr.detectChanges(); //running change detection manually
      };
    }
}

J'aimerais plutôt vous suggérer de choisir cette réponse , qui a l'air plus propre

7
Pankaj Parkar