获取 Angular2 应用组件窗口的初始调整大小

Posted 2023-03-13

【中文标题】获取 Angular2 应用组件窗口的初始调整大小

【英文标题】：Get initial resize of window for Angular2 app component

【发布时间】：2016-03-05 16:20:40

【问题描述】：

在我的 app.html 中有：

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

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

【问题讨论】：

我不确定这是否可行。您的所有代码都是在加载文档后加载的。看到这个fiddle 看看发生了什么。第一个事件监听器运行，第二个没有，所以它在你的代码中发生了同样的事情。

【参考方案1】：

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

【参考方案2】：

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

【参考方案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