Angular 2主机事件监听器冒泡

Question

我已经构建了一个指令，它使用主机事件侦听器订阅键盘事件。当按下转义键时，我正在触发这样的输出事件

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

我对子元素有这个指令。当按下转义键时，我只想为新订阅的元素触发输出事件。问题是当我单击转义键时，事件会根据层次顺序触发。我这里做了一个demo：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。

Document 接口代表浏览器中加载的任何网页。

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