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

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

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

现场演示

Answer 2

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

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

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