onResize 事件在我的代码中不起作用，但在角度发生微小变化时效果很好

问题描述

@HostListener('window:resize',['$event'])
@HostBinding('class.blur') isBlur = false;

onResize(event?) {
  this.size = window.innerWidth - 50;
}

此代码可能会出现“ctx.isBlur 不是函数”之类的错误

但是

@HostBinding('class.blur') isBlur = false;
@HostListener('window:resize',['$event'])

onResize(event?) {
  this.size = window.innerWidth - 50;
}

这段代码运行良好...我不知道为什么...

正如我所料，isBlur = false;在接收调整大小事件之前未定义。

解决方法

因为@HostListener 需要一个函数来处理并且你给它一个属性。

此外，您发布的两段代码也大不相同。

在下面的一段代码中，你装饰了 isBlur 的 setfunction 来设置元素的类

 @HostBinding('class.blur') 
 isBlur = false;

幕后是这样的：

set isBlur(value:boolean) {
   this._isBlur = value;
   if(value){
        this.elementRef.nativeElement.classList.add(className);
   }
}

get isBlur() {
  return this._isBlur;
}

方法修饰

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

类似于：

decorate() {
  document.addEventListener(eventName,(event) => method(event);
}

angular angular onresize