【问题标题】:Angular - Is there list of HostListener-Events?Angular - 是否有 HostListener-Events 列表?
【发布时间】:2018-05-26 01:12:00
【问题描述】:

我在指令中使用主机监听器来检测“blur”和“keyup”事件。 现在我需要检测指令所在的输入元素的变化。我试过了

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

但它不会触发。

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

所以,我的问题是: 有我可以使用的可用事件列表吗?

我用谷歌搜索过:

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

还有角度文档:

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

但没有找到任何东西。

【问题讨论】:

    标签: angular


    【解决方案1】:

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

    地点:

    • (无前缀):属性是一个字符串。
    • *:属性代表一个事件。
    • !: 属性是布尔值。
    • #: 属性是一个数字。
    • %:属性是一个对象。

    然后按ctrl+F并写*

    @HostListener(还有(customEvent)="handler()")也可以监听自定义事件

    Example

    【讨论】:

    • 感谢您的回答!您的 stackblitz 链接是信息的金矿,因为我现在正在学习 HostListener 和客户属性指令。对我个人而言,观看自定义活动对于将这些概念整合在一起非常有帮助。
    • 真的不是一个有用的答案,除非您热衷于阅读所有 /* cmets */。问题在列表中,而不是棘手的解决方法。
    【解决方案2】:

    您可以收听的事件列表可以在这里找到

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

    我相信这个是一样的,但组织得更好(我不确定是否所有都有效)

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

    【讨论】:

    • 这应该是公认的答案。它有下降而其他没有。
    【解决方案3】:

    对不起,我想你问的是属性列表。您可以使用例如

    @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)
    
      }
    

    【讨论】:

    • 这是解决方案的很大一部分。如果您不使用元素本身,最好以这种方式设置事件!谢谢。
    【解决方案4】:

    我想要一个显示所有这样的答案:
    document:keydown.escape

    在 Angular 中这种 sn-p 的上下文中:

    import { HostListener}    from '@angular/core';
    @HostListener('document:keydown.escape', ['$event']) 
      onKeydownHandler(event: KeyboardEvent) {
    
      }
    
    1. This website 举了几个例子。
    2. Here 是一个更完整的列表。
    3. Here 是对备选方案的更通用概述。

    【讨论】:

      【解决方案5】:

      change 事件是applied to selects

      如果您尝试使用 input 事件,但它仍然不起作用,那么您的指令就是问题所在。

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

      【讨论】:

      • 只是 dom 事件。你有一个清单,例如在w3schools.com/jsref/dom_obj_event.asp(去掉“开”,你就拥有了)
      • oninput 是一个 DOM 事件...我的意思是,您可以尝试使用单击事件进行 sintance,并查看您的代码是否触发?这将告诉我们问题出在指令还是事件上
      • 来自 oninput -->@HostListener('input',[$event])
      • 是的,谢谢,我知道这些事件。您是否介意实际回答这个问题,并告诉我与 click 一起使用的 HostListener 是否在您的指令中有效?
      猜你喜欢
      • 1970-01-01
      • 2017-11-08
      • 2017-09-24
      • 2021-08-16
      • 2018-08-02
      • 1970-01-01
      • 2020-05-31
      • 2021-04-07
      • 2020-03-27
      相关资源
      最近更新 更多