[英]Angular2: Directive loads, but does nothing
EDIT: I found the problem. 编辑:我发现了问题。 You know what it turned out to be? 您知道结果如何吗? A chrome caching issue. chrome缓存问题。 Chrome cached something, and until I turned off caching while the debugger was open and explicitly refreshed my page, I was getting nowhere. Chrome缓存了一些内容,直到在打开调试器并显式刷新页面的同时关闭缓存,我还是一无所获。 Once I refreshed, I started getting events caught. 刷新后,我开始捕获事件。
Original Post: I have a custom Angular directive that's supposed to act on a control on any of three events: onload
, onblur
, or onfocus
. 原始帖子:我有一个自定义Angular指令,该指令应在以下三个事件中的任何一个上对控件起作用: onload
, onblur
或onfocus
。 It's applied to an input
control, which may or may not be disabled. 它应用于input
控件,可以禁用也可以不禁用。 I know that onblur
and onfocus
are useless on a disabled control, but I suppose there'd be no harm in listening for events that never appear. 我知道onblur
和onfocus
在禁用的控件上没有用,但是我认为侦听从未出现的事件不会有任何危害。 On the other hand, an enabled control will fire off those events, so I need to be listening. 另一方面,已启用的控件将触发这些事件,因此我需要监听。 This directive is designed to be fairly generic, so it needs to handle both a disabled and an enabled input
control. 该伪指令设计得相当通用,因此需要处理禁用和启用的input
控件。
The problem is, it does nothing. 问题是,它什么都不做。 At the very least, it doesn't appear to do anything. 至少,它似乎无能为力。 The directive is instantiated -- I've verified that the constructor fires off, and I've verified that elementRef
points to an input control -- but that's about it. 该指令已实例化-我已经验证了构造函数会触发,并且我已经验证elementRef
指向输入控件-就是这样。 None of the listeners work. 没有一个听者工作。
Usage: 用法:
<input myDirective disabled id="someId" name="someName" [ngModel]="myValue" />
Directive: 指示:
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.");
}
}
When I run everything, it loads fine. 当我运行所有内容时,它加载正常。 No issues with missing modules, missing components, etc. No errors in the console. 缺少模块,缺少组件等都没有问题。控制台中没有错误。 As I mentioned earlier, even breaking into the code using the debugger verifies that the directive was instantiated. 如前所述,即使使用调试器闯入代码,也可以验证指令已实例化。 But I get no console output, either. 但是我也没有控制台输出。 I would at least expect it for the onload
event. 我至少期望onload
事件。 Do disabled input
controls not fire those or something? 禁用的input
控件不会触发这些内容吗?
onLoad
will not work because it is a window event and not a form event onLoad
将不起作用,因为它是窗口事件而不是表单事件
Following are the list of events that can be handled for Form Elements 以下是可为表单元素处理的事件列表
onblur
onchange
oncontextmenu
onfocus
oninput
oninvalid
onreset
onsearch
onselect
onsubmit
You have refer to it from this documentation Update based on comment 您已从本文档中参考了基于注释的更新
As you expected a MDN link to support the above answer here it is 如您所料,MDN链接在此处支持上述答案
Resource events refers to the resources in the internet such as a web url. 资源事件是指Internet中的资源,例如Web URL。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.