Angular2ウィンドウサイズを取得するonResize

Question

Angular2でイベントのサイズを変更するとウィンドウ幅を取得する方法を理解しようとしています。ここに私のコードは次のとおりです。

export class SideNav { 

    innerWidth: number; 

    constructor(private window: Window){ 

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

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

私は窓に私のアプリ間でのアクセスを得るために提供使っbootstrap.tsファイルでグローバルウインドウプロバイダをインポートしています。私が抱えている問題は、これは私にウィンドウサイズを与えますが、ウィンドウのサイズを変更することです - ウィンドウがサイズを変えても、同じサイズを何度も繰り返しています。 console.log例えば 参照ください画像： Screenshot image

私の全体的な目標は、私は、テンプレートでそれにアクセスすることができるように可変さらにonResizeにウィンドウ番号を設定できるようにすることです。私がここで間違っていることに関するアイデアは何ですか？

ありがとう！

Answer 1

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

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

コンポーネントテンプレート

またはコンポーネントのホスト要素自体この場合

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

Answer 2

をリッスン内の子要素のスクロールイベントに通知を得るために手動で変更検出を実行する必要があります。 Angularの外部コンテキストからコンポーネント変数を変更すると、基本的にresizeイベントはAngular2変更検出システムによってMonkeyがパッチされません。

私はもっときれいに見えた、this answerのために行くために、あなたをお勧めしたいと思います。むしろ

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

コード

Answer 3

使用NgZone変化検出トリガする：やった理由

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