Angular2 erhalten Fensterbreite onResize

Question

Versuchen Sie herauszufinden, wie Fenstergröße bei der Größenanpassung von Ereignissen in Angular2 erhalten. Hier ist mein 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()); 
     }; 
} 

Ich Import Fenster Provider global in der bootstrap.ts Datei ermöglichen den Zugriff auf meine App-Fenster zu gewinnen. Das Problem, das ich habe, ist dies gibt mir eine Fenstergröße, aber auf die Größe des Fensters - es wiederholt nur die gleiche Größe immer und immer wieder, auch wenn das Fenster die Größe ändert. Siehe Bild für console.log Beispiel: Screenshot image

Mein Gesamtziel ist es, die Fensternummer auf eine Variable onresize in der Lage sein zu setzen, so kann ich den Zugriff auf sie in der Vorlage haben. Irgendwelche Ideen, was ich hier falsch mache?

Danke!

Answer 1

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

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

auszukommen Scroll-Ereignisse auf einem untergeordneten Element in einer Komponenten-Vorlage

oder hören auf das Element selbst

Hostkomponenten benachrichtigt

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

Answer 2

In diesem Fall Sie müssen die Änderungserkennung manuell ausführen. Wenn Sie die Komponentenvariable aus dem äußeren Kontext von Angular ändern, wird das Resize-Ereignis im Grunde nicht vom Angular2-Änderungsdetektionssystem mit einem Patch versehen.

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

Eher würde Ich mag Ihnen vorschlagen this answer gehen, die mehr sauberer aussieht

Answer 3

Verwenden NgZone Änderungserkennung auszulösen:

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