Angular2 uzyskać szerokość okna onResize

Question

Próbuję dowiedzieć się, jak uzyskać szerokość okna na zmiany rozmiaru zdarzeń w Angular2. Tu jest mój kodu:

export class SideNav { 

    innerWidth: number; 

    constructor(private window: Window){ 

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

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

jestem importowania dostawcy okien globalnie w pliku bootstrap.ts użyciem zapewnić, aby uzyskać dostęp do aplikacji w całym moim oknem. Problem, który mam, polega na tym, że daje mi rozmiar okna, ale zmienia rozmiar okna - po prostu powtarza ten sam rozmiar, nawet jeśli okno zmienia rozmiar. Zobacz obraz console.log przykład: Screenshot image

Moim nadrzędnym celem jest, aby być w stanie określić liczbę okien do zmiennej onresize więc mogę mieć do niego dostęp w szablonie. Jakieś pomysły na temat tego, co robię źle tutaj?

Dzięki!

Answer 1

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

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

, aby otrzymywać powiadomienia o zdarzeniach przewijania na elemencie dziecka w składniki szablonu

lub słuchać na komponentach elementu przyjmującego samego

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

Answer 2

W tym przypadku musisz ręcznie uruchomić wykrywanie zmian. Ponieważ modyfikujesz zmienną składową z zewnętrznego kontekstu Angular, w zasadzie zdarzenie zmiany rozmiaru nie jest łatane małpą przez system wykrywania zmian Angular2.

Kod

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

Raczej chciałbym zaproponować, aby przejść do this answer, który wygląda bardziej czystsze

Answer 3

Zastosowanie NgZone wywołać wykrywanie zmiana:

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