如何在Angular中禁用整个网站(而不仅仅是几个页面)的右键单击

Question

我曾试图搜索允许我在Angular 2+中禁用整个应用程序右键单击的解决方案，但我只得到了禁用等少数组件的解决方案

<someSelector appDisableRightClick></someSelector>

其中，someSelector是HTML的任何元素，appDisableRightClick是使用hostlistener为contextmenu事件禁用右键单击的指令。

这个问题是它必须到处写，这意味着如果我想在应用程序中禁用到处右键单击，这不是我应该寻找的东西。这里需要一点帮助，请为整个应用程序提供最佳解决方案。

Answer 1

在此Stacklitz演示链接中进行演示

基本上需要使用文档的注入令牌访问angular服务内部的文档对象，这样就可以安全地使用angular内部的文档访问dom。下面是服务代码

export class DisableRightClickService {
constructor(@Inject(DOCUMENT) private document: Document) {}
disableRightClick() {
this.document.addEventListener('contextmenu', (event) =>
event.preventDefault()
);
}
}

在上面的代码中，我们将上下文菜单事件添加到文档中，同时我们也防止事件发生！。现在，需要将此添加到app.component.ts文件中，如下所示。。

export class AppComponent {
constructor(private rightClickDisable: DisableRightClickService) {}
ngOnInit() {
this.rightClickDisable.disableRightClick();
} 
} 

通过这种方式，您可以禁用整个应用程序的右键单击。

Answer 2

正如@GRD所评论的，下面的链接为该问题提供了一个良好且可接受的解决方案。请他在回答部分发表评论，但他没有，需要结束这个问题，所以我自己把它放在这里。

https://stackblitz.com/edit/angular-ivy-pvmcrz?file=src%2Fapp%2Fapp.component.ts