Angular - 是否有HostListener-Events列表？

Question

我在指令中使用hostlistener来检测“blur” - 和“keyup”-events。 现在我需要检测指令所在的input-element的变化。我试过了

@HostListener('change', ['$event'])

但它没有开火。

是否有“改变” - 事件？我还读过，应该有一个“输入” - 事件，但这也不会触发。

所以，我的问题是： 是否有可以使用的可用事件列表？

我搜索了谷歌：

https://www.google.de/search?q=angular+2+list+of+hostlistener+events

和角度文档：

https://angular.io/api/core/HostListener

但没有找到任何东西。

Answer 1

打开角度dom元素架构https://github.com/angular/angular/blob/master/packages/compiler/src/schema/dom_element_schema_registry.ts#L78

其中：

• （无前缀）：property是一个字符串。
• !：property表示事件。
• #：property是一个布尔值。
• %：属性是一个数字。
• ctrl+F：属性是一个对象。

然后按*并撰写@HostListener

(customEvent)="handler()"（以及> tbl %>% + select(value) %>% + collect() %>% + head(20) # A tibble: 20 x 1 value <chr> 1 "--- []\n" 2 "--- []\n" 3 "---\n- - unknown\n - 383.0\n- - hd720\n - 425.0\n" 4 "--- []\n" 5 "---\n- - hd720\n - 102.0\n" 6 "---\n- - unknown\n - 0.0\n" 7 "--- []\n" 8 "---\n- - unknown\n - 301.0\n- - hd1080\n - 1.0\n" 9 "--- []\n" 10 "---\n- - hd1080\n - 1103.0\n" 11 "--- []\n" 12 "--- []\n" 13 "---\n- - hd1080\n - 803.0\n" 14 "---\n- - hd720\n - 143.0\n" 15 "--- []\n" 16 "--- []\n" 17 "---\n- - unknown\n - 9.0\n- - hd1080\n - 102.0\n- - hd720\n - 37.0\n" 18 "---\n- - unknown\n - 136.0\n" 19 "---\n- - hd720\n - 973.0\n" 20 "---\n- - unknown\n - 330.0\n- - hd1080\n - 3.0\n" ）也可以收听自定义事件

<强> Example

Answer 2

对不起，我想你问一下房产清单。你可以使用例如

@HostListener("focus", ["$event.target"])
  onFocus(target) {
    console.log(target.value)
  }

  @HostListener("blur", ["$event.target"])
  onBlur(target) {
    console.log(target.value)

  }
  @HostListener("input", ["$event.target.value"])
  onInput(value) {
    console.log(value)

  }

Answer 3

您可以收听的事件列表可在此处找到

https://www.w3schools.com/jsref/dom_obj_event.asp

而且我相信这是相同的，但是组织得更好（我不确定是否所有内容都有效）

https://developer.mozilla.org/en-US/docs/Web/Events

Answer 4

change事件为applied to selects。

如果您尝试使用input事件，但它仍然无效，那么您的指令就是问题所在。

你导入/导出了吗？你有任何控制台错误吗？您的指令是否触发了另一个事件？

Answer 5

我想要一个显示所有类似答案的答案：
document:keydown.escape

在Angular中的这种代码段中：

import { HostListener}    from '@angular/core';
@HostListener('document:keydown.escape', ['$event']) 
  onKeydownHandler(event: KeyboardEvent) {

  }

1. This website给出了一些示例。
2. Here是更完整的列表。
3. Here是替代方法的更一般概述。