異なるコンポーネントに複数のAngular @HostListenerがある場合の競合

Question

これは初めてのことです。

私は'ESC'をリッスンするためにapp.componentに@Hostlistenerを持っています。 （グローバルリスナーのような働き）

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

と私は今、何が起こる別の@Hostlistenerでinput.component（入力フィールドでを 'ENTER' をリッスン）

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

を持っています私が入力フィールドにいないとき、 'ESC'が検出されます。私が入力フィールドに入っているとき、 'ESC'は検出されません。

予想される動作：入力フィールド内でも「ESC」が検出されるはずです。

グローバルリスナーが期待どおりに動作しないようです。これは正しい動作ですか？

Answer 1

ディレクティブを使用して入力フィールドのみを聞きます。 app.component.tsで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") 
    } 
    } 
} 

グローバルエスケープイベントが

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'; 
}