Angular 2右键点击事件？

Question

我正在使用Angular2构建交互式Web应用程序，我正在寻找一种捕获Angular组件上的右键单击的方法。我还需要防止浏览器在右键单击时出现上下文菜单，以便我可以显示自己的自定义上下文菜单。

我知道在Angular 1中，您必须创建一个自定义指令来捕获右键单击事件。在Angular2中是否仍然是这种情况？或者它内置在其中/有更简单的方法来实现吗？我已经查看了一些之前的SO问题，但它们与Angular2无关。

如何在Angular2中实现捕获右键单击和防止浏览器上下文菜单出现？

- JavascriptLoser

Answer 1

在Angular 2+中，您可以捕获任何事件，例如：

<div (anyEventName)="whateverEventHandler($event)">
</div>

请注意，$event 是可选的，函数的返回值就是事件处理程序的返回值，所以你可以使用 return false; 来避免事件的默认浏览器行为。

在您的情况下，事件名称是contextmenu。因此，您的代码可能如下所示:

@Component({
  selector: 'my-app',
  template: `
    <div (contextmenu)="onRightClick($event)">
      Right clicked
      {{nRightClicks}}
      time(s).
    </div>
  `,
  // Just to make things obvious in browser
  styles: [`
    div {
      background: green;
      color: white;
      white-space: pre;
      height: 200px;
      width: 200px;
    }
  `]
})
export class App {
  nRightClicks = 0;

  constructor() {
  }

  onRightClick() {
    this.nRightClicks++;
    return false;
  }
}

这是一个完整的可用示例：
http://on.gurustop.net/2E0SD8e

- Meligy

---

我们如何对整个页面进行相同的操作？我想禁用整个页面的右键单击。 - bpbhat77

是的，你可以使用@HostListener('document:contextmenu', ['$event'])，这里是更新后的示例链接：https://embed.plnkr.co/YasKxNbBDwbFXw96LCr1/?show=src%2Fapp.ts,preview如果你需要动态地添加事件监听器，请参考这个链接：https://dev59.com/SVsW5IYBdhLWcg3wVmKV#35082441 - Meligy

@Meligy请将此作为单独的答案添加，有些人可能会错过它，而这显然是正确的答案。 - AsGoodAsItGets