Angular 2/4 HostListener没有点击右边的事件？

Angular 2/4中的HostListener是一个装饰器，用于在组件中监听宿主元素的事件。它可以用来捕获和处理各种事件，例如点击、鼠标移动、键盘输入等。

在Angular中，HostListener装饰器可以用来监听宿主元素的事件，并在事件触发时执行相应的方法。它接受一个参数，该参数是一个字符串数组，用于指定要监听的事件类型。当指定的事件类型在宿主元素上触发时，装饰器所修饰的方法将被调用。

然而，HostListener装饰器本身并不支持监听鼠标右键点击事件。这是因为右键点击事件在浏览器中被认为是上下文菜单事件，而不是普通的点击事件。要监听右键点击事件，我们需要使用其他方法。

一种解决方案是使用HostBinding装饰器来绑定一个属性到宿主元素，并使用宿主元素的contextmenu事件来监听右键点击事件。具体步骤如下：

1. 在组件中使用HostBinding装饰器，将一个属性绑定到宿主元素上。例如，我们可以将一个名为"rightClick"的属性绑定到宿主元素的contextmenu事件上：

@HostBinding('contextmenu') rightClick = false;

1. 在组件中使用HostListener装饰器，监听宿主元素的contextmenu事件，并在事件触发时执行相应的方法。例如，我们可以在右键点击时将"rightClick"属性设置为true：

@HostListener('contextmenu', ['$event']) onRightClick(event: MouseEvent) {
  event.preventDefault(); // 阻止默认的上下文菜单弹出
  this.rightClick = true;
}

通过以上步骤，我们可以监听到宿主元素的右键点击事件，并在事件触发时执行相应的逻辑。

关于Angular的更多信息和相关概念，您可以参考腾讯云的Angular产品文档和教程：

• Angular产品介绍：https://cloud.tencent.com/document/product/1243
• Angular开发指南：https://cloud.tencent.com/document/product/1243/44739
• Angular教程：https://cloud.tencent.com/document/product/1243/44740

请注意，以上答案仅供参考，具体的实现方式可能会因您的具体需求和环境而有所不同。