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在一个事件上调用result而在另一个事件上调用false。

Answer 2

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

  @HostListener('focus')
  private _onFocus() {
    this.onFocusChanged(true);
  }

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

我认为知道原始问题中的代码是否可以修改以实现减少样板代码的效果是很有价值的，所以我会接受使其按照要求的方式工作的答案或者表明我原本试图做的事情是不可能的。

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

2 个答案: