javascript - Angular 窗口调整大小事件

Question

我想根据窗口调整大小事件(加载时和动态)执行一些任务。

目前我的 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);
    }
}

如何从这个事件对象中获取宽度和高度？

谢谢。

Answer 1

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

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

或使用 HostListener decorator :

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

支持的全局目标是 window、document 和 body。

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