Angular 2主机事件监听器冒泡

Question

我已经构建了一个使用host事件监听器订阅键盘事件的指令。当按下退出键时，我正在触发像这样的输出事件

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

我对子元素有这个指令。当按下转义键时，我想只为新订阅的元素触发输出事件。问题是，当我单击转义键时，事件将根据层次结构顺序触发。我在这里做了一个演示：https://plnkr.co/edit/FfnHAtxl2zcHsu0JilKt

重现的步骤：

1. 添加多个子元素
2. 点击 Escape 关闭所有元素

预期行为：

1. 点击最后​​添加的子元素 Escape 时，需要触发该事件

Answer 1

您应该收听渲染元素的keyup事件。

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

<强> LIVE DEMO

Answer 2

您正在将事件监听器附加到document:keyup。

  

“文档”界面表示浏览器中加载的任何网页。

尝试@HostListener('keyup', ['$event'])订阅承载属性指令的DOM元素的keyup事件。