角度2でウィンドウのサイズを即座に検出できるのはどうですか？

Question

私のコンポーネントのいくつかの機能は、ブラウザのサイズに応じてオンまたはオフになるため、サイズ変更イベントでブラウザの幅を確認する必要がありますが、On Initメソッドを使用して行うことはできますが、ブラウザの幅を更新するためにブラウザをリフレッシュする必要があります。

ngOnInit() { 
    if (window.innerWidth <= 767){ 
     ---- do something 
     } 
    } 

は、しかし、私はこの方法をOnChanges使用しようとしたが、それは動作しません。どちらか

OnChanges(changes:SimpleChanges){ 
console.log('width:====>' + changes[window.innerWidth].currentValue); 
    if (changes[window.innerWidth].currentValue <= 767){ 
     ---- do something 
} 

}

は、これを達成する任意の提案や別の方法はありますか？

Answer 1

あなただけwindowオブジェクト上resizeイベントにハンドラを置くことができるが、これは、あなたが、onresizeの最新登録されたイベントが動作する唯一の単一resizeイベントを置くことができます。それはより多くの角度の道窓のresizeに（HostListnerデコレータがマウントされた）あなたのサイズ変更機能を呼び出すことができるようになる、あなたのコンポーネント内@HostListener('window:resize')を使用するようにするに

constructor(private ngZone:NgZone) { 
    window.onresize = (e) => 
    { 
     //ngZone.run will help to run change detection 
     this.ngZone.run(() => { 
      console.log("Width: " + window.innerWidth); 
      console.log("Height: " + window.innerHeight); 
     }); 
    }; 
} 

。

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

Answer 2

あなたが検出したいHTMLブロックにリサイズメソッドを使用することでしょう簡単な方法：

<div class="some-class" (window:resize)="onResize($event)">...</div> 

次に、あなただけ追加することができ、あなたの.tsファイルに：

onResize(event) { 

    const innerWidth = event.target.innerWidth; 
    console.log(innerWidth); 

    if (innerWidth <= 767) { 
     ...do something 
    } 
} 

ページの読み込み時にウィンドウサイズを必要としない限り、の外側にのngOnInit() {}を追加します。あなたは、ウィンドウのサイズを変更すると

は、あなたが console.log

Answer 3

使用HostListenerが表示されます。あなたはおそらく何かをする前にサイズ変更のイベントをデバウンスする必要があります、それはユーザーがウィンドウのサイズをドラッグする数ミリ秒の数十倍になる可能性があるサイズ変更のたびに発生します。

import { Component, HostListener } from '@angular/core'; 

@Component({...}) 
class TestComponent { 
    @HostListener('window:resize') 
    onWindowResize() { 
     //debounce resize, wait for resize to finish before doing stuff 
     if (this.resizeTimeout) { 
      clearTimeout(this.resizeTimeout); 
     } 
     this.resizeTimeout = setTimeout((() => { 
      console.log('Resize complete'); 
     }).bind(this), 500); 
    } 
}