30

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 の例の画像を参照してください: スクリーンショット画像

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

ありがとう！

4

3 に答える 3

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

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

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

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

@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth; 
}
于 2016-02-20T18:56:49.883 に答える
21

NgZone変更検出をトリガーするために使用します。

constructor(ngZone:NgZone) {
    window.onresize = (e) =>
    {
        ngZone.run(() => {
            this.width = window.innerWidth;
            this.height = window.innerHeight;
        });
    };
}
于 2016-02-21T06:26:13.387 に答える
7

この場合、変更検出を手動で実行する必要があります。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
      };
    }
}

むしろ、よりきれいに見えるこの答えを選ぶことをお勧めします

于 2016-02-20T19:04:10.437 に答える