web-dev-qa-db-ja.com

angular 2？

コンポーネントの一部の機能はブラウザのサイズに応じてオンまたはオフになるため、サイズ変更イベントでブラウザの幅を確認したいが、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
}

}

これを達成するための提案や代替方法はありますか？

eventsangular
23
kero

resizeオブジェクト上のwindowイベントにハンドラーを置くだけでもかまいませんが、これにより単一のresizeイベント、onresizeの最新の登録済みイベントのみを置くことができます。作業。

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

それをもっとangularの方法で使用するには、コンポーネント内で@HostListener('window:resize')を使用します。これにより、リサイズ関数（HostListnerデコレータがマウントされている）を呼び出すことができます。ウィンドウのresize。

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

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);
    }
}
19
Alex Egli

より簡単な方法は、検出するhtmlブロックでresizeメソッドを使用することです。

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

これを追加しますoutside of ngOnInit() {}の場合、ページの読み込み時にウィンドウサイズが必要です。

ウィンドウのサイズを変更すると、_console.log_が表示されます

6
Nosniw