アンカー2ホストイベントリスナーバブリング

Question

私は、ホストイベントリスナーを使用してキーボードイベントにサブスクライブするディレクティブを作成しました。エスケープキーを押すと、このような出力イベントが発生します。

@HostListener('document:keyup', ['$event']) 
    handleKeyboardEvent(kbdEvent: KeyboardEvent) { 
     if (kbdEvent.keyCode === 27) { 
      this.CloseEvent.emit(); 
     } 
    } 

私はこの要素が子要素になっています。エスケープキーが押されると、私は新しく加入した要素の出力イベントだけを発生させたい。問題は、階層的な順序に基づいてイベントが発生するエスケープ・キーをクリックしたときです。私はここでデモを行った。再現するhttps://plnkr.co/edit/FfnHAtxl2zcHsu0JilKt

ステップ：

1. を
2. 複数の子要素を追加]をクリックしますエスケープそれ

すべての要素を閉じ予想される動作で：

1. 最後に追加された子要素イベントでエスケープキーをクリックすると、イベントが発生する必要があります

Answer 1

レンダリング要素のkeyupイベントを聞く必要があります。

@HostListener('keyup') onKeyup() { 
    this.defaultColor.emit(''); 
} 

LIVE DEMO

Answer 2

あなたはdocument:keyupにイベントリスナーをアタッチしています。

Documentインターフェイスは、ブラウザに読み込まれたすべてのWebページを表します。

@HostListener('keyup', ['$event'])を試して、属性ディレクティブをホストするDOM要素のkeyupイベントを購読してください。