角度 2 中的組件特定 HostListener

Question

我正在 Angular 2 中開發一個應用程序，其中有一個父組件和子組件。 子組件具有 keydown 事件的 HostListener 並執行一些功能。 我能夠實現這一點，但問題是如果我在父組件的上下文中按任意鍵，那么 HostListener 也會執行。 如果我在子組件的上下文中，我想要的是 HostListener 執行。

這不像我打算的那樣工作。 它在子組件中

@HostListener('keydown', ["$event"])
ondropdown(){ functionality }

這是有效的，但在整個頁面上，我什至嘗試了“窗口”，但效果是一樣的。

@HostListener('document:keydown', ["$event"])
ondropdown(){ //functionality }

Answer 1

在我看來，你有一個冒泡。 在這種情況下，您應該停止從子組件到父組件的事件冒泡，並防止從父組件到子組件的默認事件。

對於孩子：

  @HostListener('keydown', ["$event"])
    ...
      event.stopPropagation();
    }

對於家長：

  @HostListener('keydown', ["$event"])
    ...
      event.preventDefault();
    }