onResize 事件在我的代码中不起作用，但在 angular 中稍作更改后效果很好

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 以同时设置元素的 class

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

onResize 事件在我的代码中不起作用，但在 angular 中稍作更改后效果很好

onResize event did not work in my code but works well with a small change in angular

angular

onresize