Angular 2 个右键单击事件？

Question

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

我知道在 angular 1 中，您必须创建一个自定义指令来捕获右键单击事件。在 Angular 2 中仍然是这种情况，还是在 in/is 中构建了更简单的方法？我浏览了一些以前的 SO 问题，但它们与 Angular2.

无关

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

Answer 1

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

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

注意$event是可选的，函数的return是事件处理程序的return，所以，你可以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

Angular 2 个右键单击事件？

Angular 2 right click events?

contextmenu

angular