Question

这是我第一次这样做。

我在 app.component 中有 @Hostlistener 来收听＆＃39; ESC＆＃39; 。（就像全球倾听者一样）

@HostListener('document:keydown', ['$event'])
    public onKeydownHandler(event: KeyboardEvent): void {
    ....... // listens for 'ESC'
}

我在 input.component 中有另一个 @Hostlistener （在输入字段中收听＆＃39; ENTER＆＃39; ）< / p>

 @HostListener('keydown', ['$event'])
    public onKeydownHandler(event: KeyboardEvent): void {
    ....... // listens for 'ENTER'
    }

现在发生的事情是当我不在输入字段中时，＆＃39; ESC＆＃39;将被检测到。当我在输入字段中时，＆＃39; ESC＆＃39;将无法检测到。

预期的行为：＆＃39; ESC＆＃39;甚至应该在输入字段内检测到。

似乎全球聆听者并没有像我预期的那样工作。这是正确的行为吗？

Answer 1

使用指令仅侦听输入字段。 Working demo

<input placeholder="Can't copy/paste" type="text" litsenEnter/>

指令文件

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[litsenEnter]'
})
export class LitsenEnter{
  constructor() { }

   @HostListener('keydown', ['$event'])
    public onKeydownHandler(e: KeyboardEvent): void {
    if(e.keyCode===13){
      alert("enter")
    }
    }
}

app.component.ts中的Global Escape事件

import { Component } from '@angular/core';
import {  HostListener } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @HostListener('document:keydown', ['$event']) triggerEsc(e: KeyboardEvent) {
    if(e.keyCode===27){
      console.log("global esc");
      alert("esc");
    }
  }

  name = 'Angular 5';
}

在不同组件中具有多个Angular @HostListener时发生冲突

1 个答案: