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

Question

@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；在接收调整大小事件之前未定义。

Answer 1

因为@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);
}