- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在构建一个 Ionic 3 应用程序,我在其中创建了一个“自动完成”指令,这是一个简单的指令当元素获得焦点时弹出一个自动完成对话框。这是通过“自动完成”完成的:
@HostListener('ionFocus', ['$event._native.nativeElement'])
onFocus(target) {
target.blur();
this.showAutocompleteDialog(target);
}
当我只在系统中只使用过一次的页面中使用该指令时,这就奏效了。
但后来我制作了一个新组件,我们称它为“AddressField”,它在其模板的一个元素中有一个“自动完成”指令。现在 @HostListener onFocus 事件被触发了两次,因此显示了两个自动完成对话框。
这只发生在 AddressField 组件中的“自动完成”指令,并且它只在第二个实例中触发两次系统中的“AddressField”。
我是不是以某种方式错误地使用了@HostListener,或者这听起来像是一个应该提交的错误?在任何一种情况下,某种解决方法都会真的很有帮助。
谢谢
最佳答案
只是对此的更新:
最后,我的印象是这归结为 Angular 错误(参见 fx https://github.com/ionic-team/ionic-v3/issues/86 )——至少,我没有发现我的方法有任何问题。
我的解决方案很老套:我在我的指令中添加了一个标志“alreadyFired”,并在我的 HostListener 函数中检查它。
@HostListener('ionFocus', ['$event._native.nativeElement'])
onFocus(target) {
if (this.alreadyFired) {
return;
}
this.alreadyFired = true;
target.blur();
this.showAutocompleteDialog(target);
}
当然,当关闭对话框时,我再次将 alreadyFired 标志设置为 false。 Hacky,但在截止日期前工作..
关于多次触发 Angular @HostListener 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53082060/
这个问题在这里已经有了答案: Detect change in orientation using javascript (11 个答案) 关闭 3 年前。 我想检测方向变化,检测我正在以纵向模式或
在 Angular 中,我必须测试以下代码: @HostListener('document:click', ['$event']) public onDocumentClick(event: Mou
我正在尝试找到一种方法来为我的一些使用 HostListener 的组件制作可重用的装饰器。 我目前有几个功能(组件)它们非常相似,并且都具有相同的@HostListener block : @Com
我添加了一个下拉列表并尝试使用指令打开它,但单击不适用于@HostListener。下面是我的 Angular 和 html 代码。 import { Directive, HostListener,
我在 AbstractControl(输入元素)中使用 HostListener 来尝试监听重置事件。但是,当我重置作为此输入元素的父级的表单时,HostListener 不会触发。 您可以在以下位置
Angular 版本:6.0.0 客户端:6.0.0 如果页面滚动 500 像素或更多,我已经使用跟随 HostListener 来显示滚动到顶部按钮,反之亦然。 isSectionFixed : b
我有以下指令。当应用于输入元素时,它会检查字符并在禁止字符时调用 preventDefault: @Directive({ selector: '[cdtPreventInput]' }) ex
我有一个结构指令,它需要像在属性指令上那样监听主机上的事件。 在指令中使用@HostListener没有错误,但是没有接收到事件。 指令代码如下: import { Directive, HostLi
我有一个基于 Angular2 客户端的应用程序。我有一个基类: abstract class BaseClass { @HostListener('window:beforeunload')
我已经定义了模板 @Component({ selector: 'name', directives: [ ... ], templateUrl: 'name.html' })
我有下一个根组件模板,它绘制了 9 个图 block : 和下一个 tile 组件,我在其中添加了用于文档点击的 HostListener: import {AfterVie
我正在尝试跟踪用户何时使用键盘按下 Shift+Tab 组合键,但我无法触发该事件 @HostListener('keyup', ['$event']) @HostListener('keydown'
我想知道如何使用 @HostListener。我找到的唯一信息是在 cheatsheet 中: @HostListener('click', ['$event']) onClick(e) {...}
我正在构建一个 Ionic 3 应用程序,我在其中创建了一个“自动完成”指令,这是一个简单的指令当元素获得焦点时弹出一个自动完成对话框。这是通过“自动完成”完成的: @HostListener('io
我如何获取事件数据(即 $event )我在这里: 而是在这里?: @HostListener('click') onClick($event) { // TypeError: $data
我有两个组件——父组件和子组件。我已将 hoSTListener 附加到两个组件以检测关键事件。我想检测两个组件中的空格键事件。如果用户在子组件文本字段中按下空格键,那么我希望父组件什么也不做。但是,
我在 Angular7 指令中使用 @hoSTListener。我可以为此使用多个事件吗? 问题是在 Android 之外的任何设备上都可以监听 'keydown' 事件,因为后者没有关键事件。 切换
我见过 @HostListner 针对不同元素和事件的例子,我什至见过一个在用户滚动时监听的例子。这些例子看起来像这样 @HostListener('window:scroll', [$event])
我正在尝试对一些在前端完美运行的功能进行单元测试,但单元测试似乎没有发挥作用。 下面是我当前的单元测试,它还没有完全完成我只是想在进行更复杂的检查之前让基本测试工作。 @Component({ t
我想调用一些方法,当 ESCape 按钮被按下时。我是这样做的: @HostListener('window:keydown', ['$event']) clickEscape(event: Keyb
我是一名优秀的程序员,十分优秀!