web-dev-qa-db-ja.com

Angular2はウィンドウの幅を取得します

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

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

私の全体的な目標は、ウィンドウ番号を変数onresizeに設定できるようにして、テンプレートでアクセスできるようにすることです。ここで私が間違っていることについてのアイデアはありますか？

ありがとう！

csstypescriptangularangular2-directives
30
Spencer Bigum
<div (window:resize)="onResize($event)"

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

コンポーネントテンプレートの子要素のスクロールイベントで通知を受ける

または、コンポーネントのHost要素自体をリッスンします

@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth; 
}
53
Günter Zöchbauer

NgZoneを使用して、変更検出をトリガーします。

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

この場合、変更検出を手動で実行する必要があります。 Angularの外部コンテキストからコンポーネント変数を変更しているため、基本的にresizeイベントは、Angular2変更検出システムによってモンキーパッチが適用されません。

コード

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

むしろ this answer に行くことをお勧めします。

7
Pankaj Parkar