Angular中@HostListener与@HostBinding顺序导致onResize事件报错问题

这个问题的核心是TypeScript装饰器的作用规则：类成员装饰器会默认作用于它后面紧跟的第一个非装饰器类成员。

错误写法的问题 #

你第一种写法里，@HostListener 装饰器和它要绑定的onResize方法之间插入了@HostBinding修饰的isBlur属性：

// 这个@HostListener实际作用到了后面紧跟的isBlur属性上
@HostListener('window:resize', ['$event'])
@HostBinding('class.blur') isBlur = false;

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

此时Angular会将isBlur这个布尔属性识别为window:resize事件的回调函数，事件触发时尝试调用isBlur()，自然会抛出「ctx.isBlur is not a function」的错误。这个报错和isBlur是否有初始赋值无关，本质是调用了非函数类型的变量。

调整顺序后正常的原理 #

调整装饰器顺序后，两个装饰器分别作用于对应的目标成员：

// @HostBinding作用于isBlur属性
@HostBinding('class.blur') isBlur = false;
// @HostListener作用于后面紧跟的onResize方法
@HostListener('window:resize', ['$event'])
onResize(event?) {
  this.size = window.innerWidth - 50;
}

@HostBinding 绑定isBlur到类名，@HostListener 绑定onResize作为resize事件回调，所有逻辑符合预期，因此不会报错。

注意：装饰器和目标成员之间的空行不会影响绑定规则，只要保证装饰器和它要修饰的目标成员之间没有插入其他类成员即可。

内容的提问来源于stack exchange，提问作者장호정