获取 Angular2 应用程序组件 window 的初始调整大小

Question

在我的 app.html 我有：

<div id="wrapper" 
    (document:load)="onWindowLoadOrResize($event)" 
    (window:resize)="onWindowLoadOrResize($event)">

这用于设置内容 div 在 css 上的高度。调整大小工作正常，但最初不会在页面加载时触发。 document:load 根本不触发。运行将看到 window 初始大小的代码的最佳方法是什么？

Answer 1

此时在您的应用程序中，document.load 已被触发。对您来说最简单的方法可能是从您的应用程序组件构造函数中调用调整大小函数。此时您的 DOM 已准备就绪，应用程序正在启动。此外，您应该将高度值分配给模板可以绑定到的应用程序中的属性，而不是直接进行 DOM 操作。

Answer 2

export class Application implements OnInit {
    ngOnInit() {
        window.onresize = this.onWindowLoadOrResize;
        this.onWindowLoadOrResize();
    }
    private onWindowLoadOrResize() {
      //TODO: your logic        
    }
}

Answer 3

我遇到了类似的问题。这是我提出的解决方案：

ngOnInit() {
  console.log('document.load: ', window.innerWidth);
}

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

参考：Angular2 get window width onResize

获取 Angular2 应用程序组件 window 的初始调整大小

Get initial resize of window for Angular2 app component

angular