javascript - Angular2 : Directive loads, 但什么也不做

Question

编辑:我发现了问题。你知道结果是什么吗？ chrome 缓存问题。 Chrome 缓存了一些东西，直到我在调试器打开并显式刷新我的页面时关闭缓存，我才一无所获。一旦我刷新了，我就开始捕获事件。

原帖:我有一个自定义 Angular 指令，该指令应该对以下三个事件中的任意一个事件的控件起作用:onload、onblur 或 onfocus。它应用于输入控件，该控件可能会或可能不会被禁用。我知道 onblur 和 onfocus 对于禁用的控件来说是无用的，但我认为监听从未出现的事件不会有什么坏处。另一方面，启用的控件将触发这些事件，因此我需要监听。该指令被设计得相当通用，因此它需要处理禁用和启用的 input 控件。

问题是，它什么也没做。至少，它看起来没有做任何事情。该指令已实例化 - 我已经验证了构造函数已启动，并且我已验证 elementRef 指向输入控件 - 但仅此而已。没有一个监听器工作。

用法:

<input myDirective disabled id="someId" name="someName" [ngModel]="myValue" />

指令:

import { Directive, HostListener, ElementRef, Input } from "@angular/core";

@Directive({ selector: "[myDirective]" })
export class MyDirective {
    constructor(private elementRef: ElementRef) {
    }

    @HostListener("focus", ["$event.target.value"])
    onFocus(value: string) {
        console.log("MyDirective: Focus caught.");
    }

    @HostListener("blur", ["$event.target.value"])
    onBlur(value: number) {
        console.log("MyDirective: Blur caught.");
    }

    @HostListener("load", ["$event.target.value"])
    onLoad() {
        console.log("MyDirective: Load caught.");
    }
}

当我运行所有内容时，它加载得很好。没有缺少模块、缺少组件等问题。控制台中没有错误。正如我之前提到的，即使使用调试器闯入代码也会验证该指令是否已实例化。但我也没有得到控制台输出。我至少希望它能用于 onload 事件。禁用的 input 控件是否不会触发这些或其他内容？

Answer 1

onLoad 将不起作用，因为它是窗口事件而不是表单事件

以下是表单元素可以处理的事件列表

onblur  
onchange
oncontextmenu   
onfocus 
oninput 
oninvalid   
onreset 
onsearch
onselect
onsubmit

你已经从这个documentation引用了它根据评论更新

正如您所期望的 MDN 链接来支持上述答案 here it is

资源事件是指互联网中的资源，例如网址。