Angular 2右键单击事件？

Question

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

我知道在角度1中，您必须创建自定义指令来捕获右键单击事件。这在Angular 2中还是如此，还是内置于其中？是否有更简单的方法？我已经浏览了一些以前的SO问题，但它们与Angular2没有关系。

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

Answer 1

在角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

Answer 2

您不能在Angular 2模板中使用Javascript。

但是你可以简单地使用第三方库，如angular2-contextmenu.