Question

我的组件中的某些功能打开或关闭取决于浏览器大小因此我想检查调整大小事件的浏览器宽度，但是我可以使用On Init方法，但是，我需要刷新浏览器调整大小时发生更新浏览器宽度

 ngOnInit() {
     if (window.innerWidth <= 767){
       ---- do something
      }
   }

但是我尝试使用OnChanges方法，但它不起作用

OnChanges(changes:SimpleChanges){
console.log( 'width:====>' + changes[window.innerWidth].currentValue);
  if ( changes[window.innerWidth].currentValue <= 767 ){
      ---- do something
}

}

有任何建议或替代方法来实现这一目标吗？

Answer 1

您可以将resize事件上的处理程序放在window对象上，但这样您只能放置一个resize事件，onresize上的最新注册事件将起作用

constructor(private ngZone:NgZone) {
    window.onresize = (e) =>
    {
        //ngZone.run will help to run change detection
        this.ngZone.run(() => {
            console.log("Width: " + window.innerWidth);
            console.log("Height: " + window.innerHeight);
        });
    };
}

要使其更加棱角分明，请在组件内使用@HostListener('window:resize')，这样就可以在HostListner窗口调用调整大小函数（已装载resize装饰器）。< / p>

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

Answer 2

使用HostListener。您可能应该在执行任何操作之前去抖调整大小事件，每次大小更改时都会触发，当用户拖动窗口大小时，它会在几毫秒内发生几十次或几百次。

import { Component, HostListener } from '@angular/core';

@Component({...})
class TestComponent {
    @HostListener('window:resize')
    onWindowResize() {
        //debounce resize, wait for resize to finish before doing stuff
        if (this.resizeTimeout) {
            clearTimeout(this.resizeTimeout);
        }
        this.resizeTimeout = setTimeout((() => {
            console.log('Resize complete');
        }).bind(this), 500);
    }
}

Answer 3

更简单的方法是在要检测的html块上使用resize方法：

string temp = "\\folder_name\\file_name.filetype.[somename@somedomain].wallet";

var filename = Path.GetFileName(temp);
var lastIndex = filename.IndexOf('.', filename.IndexOf('.') + 1);
var fileYouAreLookingFor = filename.Substring(0, lastIndex);

然后在您的<div class="some-class" (window:resize)="onResize($event)">...</div>文件中添加：

.ts

添加onResize(event) { const innerWidth = event.target.innerWidth; console.log(innerWidth); if (innerWidth <= 767) { ...do something } }的，除非您希望在页面加载时显示窗口大小。

当您调整窗口大小时，您会看到ngOnInit() {}

我怎么能在角度2中检测到窗口大小调整？

3 个答案: