角度窗口调整大小事件 [英] Angular window resize event

问题描述

我想基于窗口重新调整大小事件（在加载时动态地）执行一些任务。

I would like to perform some tasks based on the window re-size event (on load and dynamically).

目前我的DOM有如下：

Currently I have my DOM as follows:

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

事件正确触发

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

如何从此事件中检索宽度和高度对象？

How do I retrieve the Width and Height from this event object?

谢谢。

推荐答案

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

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

或

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

支持的全球目标是窗口， document ， body 。

Supported global targets are window, document, and body.

直到Angular中实现了 https://github.com/angular/angular/issues/13248 性能更好地订阅DOM事件并使用RXJS减少事件数量，如其他一些答案所示。

Until https://github.com/angular/angular/issues/13248 is implemented in Angular it is better for performance to subscribe to DOM events imperatively and use RXJS to reduce the amount of events as shown in some of the other answers.

这篇关于角度窗口调整大小事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！