[解決済み】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);
    }
}

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

ありがとうございます。

解決方法は？

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

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

を使用するか、または HostListener デコレータ :

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

サポートされるグローバルターゲットは window , document および body .

まで https://github.com/angular/angular/issues/13248 がAngularに実装された場合、他の回答にあるように、DOMイベントを必須で購読し、RXJSを使用してイベントの量を減らす方がパフォーマンスの面で優れています。