Angular2 pencere genişliğini alın. Yeniden boyutlandır

Question

Angular2'deki yeniden boyutlandırma olaylarında pencere genişliğinin nasıl alınacağını anlamaya çalışın.

export class SideNav { 

    innerWidth: number; 

    constructor(private window: Window){ 

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

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

Pencereye doğru uygulamam boyunca erişmek için temin kullanarak bootstrap.ts dosyasında global pencere sağlayıcı ithal ediyorum: İşte benim kodudur. Sorun şu ki, bu bana bir pencere boyutu veriyor, ancak pencereyi yeniden boyutlandırırken - pencere boyutu değişse bile, aynı boyutu tekrar tekrar tekrarlar. console.log örneğin bakınız resim: Screenshot image

Benim genel amaç yüzden şablonda buna erişebilir değişken OnResize pencere sayısını ayarlamak için muktedir olduğunu. Burada yanlış yaptığım şeyler hakkında bir fikrin var mı?

Teşekkürler!

Answer 1

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

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

bir bileşenler şablonun

ya Bu durumda bileşenler ana elemanın kendisi

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

Answer 2

dinlemek bir alt öğe üzerinde kaydırma olayları bildirim almak Değişiklik tespitini manuel olarak çalıştırmanız gerekir. Bileşen değişkenini Açısal dış bağlamından değiştirirken, temel olarak yeniden boyutlandırma olayı, Angular2 değişiklik algılama sistemi tarafından yama işlemine maruz kalmaz.

Daha temizleyici görünüyor ki, this answer için gitmek için önermek isterim Aksine

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

Kod

Answer 3

Kullanım NgZone değişim algılama tetiklemek için: niye

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