- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我在 IE11 中遇到了 @HostListener 的问题。当用户使用 keydown 事件获取空格时,我需要捕捉,我的代码非常简单,它在 Chrome 和 FireFox 中运行良好,但在 IE 中不起作用。
import {Component, HostListener} from '@angular/core';
@Component({
selector: 'home',
styleUrls: ['./home.component.css'],
templateUrl: './home.component.html'
})
export class HomeComponent {
@HostListener('window:keydown.control.space', ['$event'])
@HostListener('window:keydown.space', ['$event'])
spaceEvent(event: any) {
alert('space key!');
}
}
在 IE 开发者工具中,我没有看到任何错误或警告,我不知道如何解决这个问题。有什么解决这个问题的建议吗?
最佳答案
我找到了解决方案。 IE 还不能正确处理许多不同的事件,需要使用 @HostListener('window:keydown', ['$event'])
然后捕获一些 keyCode
例子:
import {Component, HostListener} from '@angular/core';
@Component({
selector: 'home',
styleUrls: ['./home.component.css'],
templateUrl: './home.component.html'
})
export class HomeComponent {
@HostListener('window:keydown', ['$event'])
spaceEvent(event: any) {
if(event.ctrlKey && event.keyCode == 32)
console.log('ctrl + space');
else if(event.keyCode == 32)
console.log('space');
}
}
关于angular 2 HostListener - 按键空间事件在 IE 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44564525/
这个问题在这里已经有了答案: 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
我是一名优秀的程序员,十分优秀!