Angular2 ottiene la larghezza della finestra onResize

Question

Cercando di capire come ottenere la larghezza della finestra sul ridimensionamento degli eventi in Angular2. Qui è il mio codice:

export class SideNav { 

    innerWidth: number; 

    constructor(private window: Window){ 

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

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

Sto importando fornitore finestra a livello globale nel file bootstrap.ts usando fornire per ottenere l'accesso in tutta la mia app per finestra. Il problema che sto avendo è che mi dà una dimensione della finestra, ma sul ridimensionamento della finestra - ripete semplicemente la stessa dimensione più e più volte anche se la finestra cambia dimensione. Vedi immagine per esempio console.log: Screenshot image

Il mio obiettivo generale è quello di essere in grado di impostare il numero di finestra per un onResize variabile in modo che io possa avere accesso ad esso nel modello. Qualche idea su cosa sto facendo male qui?

Grazie!

Answer 1

<div (window:resize)="onResize($event)" 

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

a ricevere la notifica sugli eventi di scorrimento su un elemento figlio in un modello di componenti

o ascoltare sull'elemento ospite componenti si

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

Answer 2

In questo caso è necessario eseguire il rilevamento delle modifiche manualmente. Mentre modifichi la variabile componente dal contesto esterno di Angular, l'evento di ridimensionamento in pratica non ottiene patch scimmia dal sistema di rilevamento modifiche Angular2.

Codice

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

Piuttosto vorrei suggerire di andare per this answer, dall'aspetto più pulito

Answer 3

Usa NgZone per innescare il cambiamento di rilevamento:

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