如何将非字符串值传递给 Angular 中的 HostListener 函数

Question

我有一个关于输入元素的指令，在指令类中，我想听模糊并专注于相同的功能。在每个事件中，我想传递一个文字布尔值，但 args 数组的类型为 string[]

我将如何修改此函数以接受布尔值或任何其他类型

@HostListener('focus', ['true'])
@HostListener('blur', ['false'])
private onFocusChanged(isFocused: boolean) {
   // Implementation...
   // Both events fire the function but the blur passes true instead of false.
}

Answer 1

args数组由表达式组成，这就是它string[]的原因。它们是表达式，因为元素应该是$event、$event.target等字符串。

可以使用任何非字符串值代替字符串，只要它可以强制转换为有效的表达式字符串(布尔值可以(并符合 TypeScript 类型检查。

双

@HostListener('focus', [<string><any>true])
@HostListener('blur', [<string><any>false])
private onFocusChanged(isFocused: boolean) { ... }

和

@HostListener('focus', ['true'])
@HostListener('blur', ['false'])
private onFocusChanged(isFocused: boolean) { ... }

等效，并导致在一个事件上使用布尔true调用回调，在另一个事件上调用false回调。

Answer 2

作为临时解决方案，我实现了两个单独的 HostListener，它们使用所需的布尔值调用主处理程序函数：

  @HostListener('focus')
  private _onFocus() {
    this.onFocusChanged(true);
  }
  @HostListener('blur', [])
  private _onBlur() {
    this.onFocusChanged(false);
  }

我认为知道是否可以修改原始问题中的代码以达到减少样板代码的效果是有价值的，所以我会接受使其工作问题的答案，因为它被问到或表明我最初试图做的事情是不可能的。