角度窗口调整大小事件

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

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

谢谢。

原文由 DanAbdn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

或使用 HostListener 装饰器：

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

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

在 Angular 中实现 https://github.com/angular/angular/issues/13248 之前，最好强制订阅 DOM 事件并使用 RXJS 来减少事件数量，如其他一些答案所示。

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道很久以前有人问过这个问题，但现在有更好的方法来做到这一点！我不确定是否有人会看到这个答案。显然你的进口：

 import { fromEvent, Observable, Subscription } from "rxjs";

然后在你的组件中：

 resizeObservable$: Observable<Event>
resizeSubscription$: Subscription

ngOnInit() {
    this.resizeObservable$ = fromEvent(window, 'resize')
    this.resizeSubscription$ = this.resizeObservable$.subscribe( evt => {
      console.log('event: ', evt)
    })
}

然后一定要取消订阅销毁！

 ngOnDestroy() {
    this.resizeSubscription$.unsubscribe()
}

原文由 Chris Stanley 发布，翻译遵循 CC BY-SA 4.0 许可协议