gpt4 book ai didi

多次触发 Angular @HostListener 事件

转载 作者:行者123 更新时间:2023-12-05 07:28:58 26 4
gpt4 key购买 nike

我正在构建一个 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com