我正在使用Angular2构建一个交互式Web应用程序,我正在寻找一种方法来捕获角度组件的右键单击.我还需要阻止右键单击显示浏览器上下文菜单,以便显示我自己的自定义上下文菜单.
我知道在角度1中,您必须创建一个自定义指令来捕获右键单击事件.这仍然是Angular 2的情况,还是内置/有更简单的方法吗?我已经看过一些以前的SO问题,但它们与Angular2无关.
如何完成捕获右键单击并阻止浏览器上下文菜单出现在Angular2中?
在Angular 2+中,您可以捕获任何事件,例如:
注意这$event
是可选的,并且函数的返回是事件处理程序的返回,因此,您return false;
可以避免事件的默认浏览器操作.
在您的情况下,事件名称是contextmenu
.所以,你的代码可以是这样的:
@Component({
selector: 'my-app',
template: `
Right clicked
{{nRightClicks}}
time(s).
`,
// 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