☰

Angular ウィンドウのサイズ変更イベント 質問する

tag-icon • tag-icon javascript angular
Angular ウィンドウのサイズ変更イベント 質問する

ウィンドウのサイズ変更イベント (ロード時および動的) に基づいていくつかのタスクを実行したいと思います。

現在、私の DOM は次のようになっています。

<div id="Harbour">
    <div id="Port" (window:resize)="onResize($event)" >
        <router-outlet></router-outlet>
    </div>
</div>

イベントは正常に起動します

export class AppComponent {
    onResize(event) {
        console.log(event);
    }
}

このイベント オブジェクトから幅と高さを取得するにはどうすればよいですか?

ありがとう。

ベストアンサー1

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

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

またはHostListener デコレータ:

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

またはHostListenerデコレータを使用する別の方法

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

サポートされているグローバル ターゲットはwindow、、documentおよびですbody。

それまでAngular 2 の新機能Angular で実装されている場合、他の回答のいくつかに示されているように、DOM イベントを命令的にサブスクライブし、RXJS を使用してイベントの量を減らす方がパフォーマンスが向上します。

おすすめ記事