如何使用 HostListener 防止同一事件在 angular 的不同组件中传播？

Question

我有两个组件，它们都在监听键盘输入。如果其中一个满足特定条件，那么我想阻止在听完这些事件后发生任何其他动作。这是一个片段：

组件 1（全屏覆盖）：

@HostListener("document:keydown", ["$event"])
public handleKeyboardEvent(event: KeyboardEvent): void {
    if (!this.isShow) {
        return;
    }
    event.preventDefault();
    event.stopPropagation();
    event.returnValue = false;
}

组件 2（对话框）：

@HostListener("document:keydown.escape", ["$event"]) 
public onEscKeyUp(e: KeyboardEvent): void {
    this.dial.close();
}

所以当叠加层显示时，我不希望对话框关闭，如果这有意义的话。我有那个代码，但它不起作用。

Answer 1

所以你的第二个组件没问题，它只会在用户从键盘调用 escape 事件时调用。第一个组件有问题，当用户按下任何键包括 escape 时，它会被调用。

您可以为 escape 添加条件：

@HostListener("document:keydown", ["$event"])
public handleKeyboardEvent(event: KeyboardEvent): void {
    if (!this.isShow) {
        return;
    }
     // keycode for escape
    if (event.keyCode === 27) {
        event.stopPropagation();
        return;
    }

    // as per @solar's answer
    event.stopImmediatePropagation();
    //event.returnValue = false; // why do you need this
    return false;
}

Answer 2

我已经弄清楚如何让它工作了：

@HostListener("document:keydown", ["$event"])
public handleKeyboardEvent(event: KeyboardEvent): boolean
{
    if (!this.isShow)
    {
        return true;
    }
    event.stopImmediatePropagation();
    return false;
}

如何使用 HostListener 防止同一事件在 angular 的不同组件中传播？

how to prevent propagation of the same event in different components in angular with HostListener?

javascript

events

angular