Angular 2主机事件监听器冒泡

Question

我建立了一个使用主机事件侦听器订阅键盘事件的指令。 当按下退出键时，我将触发一个输出事件

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

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

重现步骤：

1. 添加多个子元素
2. 单击“ 转义”关闭所有元素

预期行为：

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

Answer 1

您应该正在监听rendereing元素的keyup事件。

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

现场演示

Answer 2

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

Document界面代表浏览器中加载的任何网页。

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