当前位置:  开发笔记 > 后端 > 正文

Angular 2右键单击事件?

如何解决《Angular2右键单击事件?》经验,为你挑选了1个好方法。

我正在使用Angular2构建一个交互式Web应用程序,我正在寻找一种方法来捕获角度组件的右键单击.我还需要阻止右键单击显示浏览器上下文菜单,以便显示我自己的自定义上下文菜单.

我知道在角度1中,您必须创建一个自定义指令来捕获右键单击事件.这仍然是Angular 2的情况,还是内置/有更简单的方法吗?我已经看过一些以前的SO问题,但它们与Angular2无关.

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



1> Meligy..:

在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


是的,你可以使用`@HostListener('document:contextmenu',['$ event'])`,这是一个更新的例子:https://embed.plnkr.co/YasKxNbBDwbFXw96LCr1/?show = src%2Fapp.ts,预览如果您需要动态执行此操作,请访问http://stackoverflow.com/questions/35080387/dynamically-add-event-listener-in-angular-2/35082441#35082441
推荐阅读
雯颜哥_135
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有