angular 2 HostListener - keydown 空格事件在 IE 中不起作用答案

【问题标题】：angular 2 HostListener - keydown space event doesn't work in IEangular 2 HostListener - keydown 空格事件在 IE 中不起作用
【发布时间】：2017-06-15 09:59:48
【问题描述】：

我在 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。旧版本的 IE 不支持各种事件。那么这对你来说是一个限制。
看看这里。 stackoverflow.com/questions/9507200/…

标签： angular internet-explorer typescript ecmascript-6 angular2-template

【解决方案1】：

我找到了解决方案。 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');
    }
}

【讨论】：