Angular中如何为HostListener函数传递非字符串值？

这是Angular指令开发中很常见的小坑，我来帮你理清问题根源并给出几种可行的解决方案：

问题根源 #

你遇到的问题是因为@HostListener的第二个参数数组中的元素是表达式字符串，Angular会在宿主元素的上下文中对这些表达式进行求值。你写的['true']和['false']实际上是字符串字面量，所以你的函数接收到的参数是字符串'true'和'false'。而在JavaScript中，任何非空字符串转换为布尔值都会得到true，这就导致不管是focus还是blur事件触发，isFocused都会被解析为true。

解决方案 #

方案1：直接从事件对象判断类型（最推荐）

不需要手动传参数，而是通过事件对象的type属性来判断当前是聚焦还是失焦事件，这种方式最直观也不容易出错：

@HostListener('focus', ['$event']) 
@HostListener('blur', ['$event']) 
private onFocusChanged(event: FocusEvent) { 
  const isFocused = event.type === 'focus';
  // 你的实现代码...
}

方案2：将字符串参数转换为正确的布尔值

如果不想修改参数传递方式，可以在函数内部把接收到的字符串参数转换为对应的布尔值：

@HostListener('focus', ['true']) 
@HostListener('blur', ['false']) 
private onFocusChanged(isFocusedStr: string) { 
  const isFocused = isFocusedStr === 'true';
  // 你的实现代码...
}

方案3：传递布尔表达式而非字符串字面量

通过在@HostListener中传入布尔表达式，让Angular直接求值为布尔值传递给函数：

@HostListener('focus', ['$event.type === "focus"']) 
@HostListener('blur', ['$event.type === "focus"']) 
private onFocusChanged(isFocused: boolean) { 
  // 你的实现代码...
}

这里的表达式$event.type === "focus"会在事件触发时被求值，focus事件时返回true，blur事件时返回false，刚好符合你的需求。

内容的提问来源于stack exchange，提问作者tt9