在Angular 4中检测实时窗口大小变化

问题描述

我一直在尝试构建一个响应式导航栏，并且不希望使用媒体查询，因此我打算将与窗口大小作为标准.但是我遇到了一个问题，因为我无法找到有关Angular 4窗口大小检测的任何方法或文档.我也尝试过JavaScript方法，但不支持.

I have been trying to build a responsive nav-bar and do not wish to use a media query, so I intend to use *ngIF with the window size as a criterion.But I have been facing a problem as I am unable to find any method or documentation on Angular 4 window size detection. I have also tried the JavaScript method, but it is not supported.

我还尝试了以下:

constructor(platform: Platform) {
    platform.ready().then((readySource) => {
        console.log('Width: ' + platform.width());
        console.log('Height: ' + platform.height());
    });
}

...用于离子.

和screen.availHeight，但仍然没有成功.

推荐答案

要在init上获取它

public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;
}

如果您想在调整大小时保持更新:

If you wanna keep it updated on resize:

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

这篇关于在Angular 4中检测实时窗口大小变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！