如何使从任何组件调用的角度禁用禁用右键单击功能

Question

<div class="container" (contextmenu)="onRightClick()">
</div>

我想禁用一些组件而不是整个网站的右键单击。我必须在要禁用右键单击的所有组件中定义以下功能。最好的方法是什么，这样我就不必在这些组件中一次又一次地定义函数

onRightClick() {
  return false;
}

Answer 1

这是contextmenu事件：创建指令来管理它。

Stackblitz

@HostListener('contextmenu', ['$event'])
onRightClick(event) {
  event.preventDefault();
}

Answer 2

我的建议是制作一个指令，将点击绑定到它所附加的元素。你有关于他们官方文档的小教程，它应该为你提供清晰的路径。

在这种情况下，您可以在整个应用程序中重用指令，并且会做同样的事情。将点击绑定到它所附加的元素，并在其中包含一些逻辑，因此您不要重复自己。

文档

例子：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appDisableRightClick]'
})
export class DisableRightClickDirective {
  @HostListener('contextmenu', ['$event'])
  onRightClick(event) {
    event.preventDefault();
  }
}

您还可以制作将导出此指令的模块，为了在其他模块中使用它，只需导入该模块。模块应如下所示：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DisableRightClickDirective } from './disable-right-click.directive';

@NgModule({
  declarations: [
    DisableRightClickDirective
  ],
  imports: [
    CommonModule
  ],
  exports: [
    DisableRightClickDirective
  ]
})
export class DisableRightClickModule {
}

在您想要使用此指令的每个模块中，您所要做的就是 import DisableRightClickModule。仅此而已。

import { NgModule } from '@angular/core';
import { DisableRightClickModule } from './disable-right-click.module';

@NgModule({
  declarations: [
   ...
  ],
  imports: [
    ....,
    DisableRightClickModule
  ]
})
export class SomeDummyModule {
}

在您的 HTML 中，只需将指令作为属性附加到任何元素，例如。

<a href="#" appDisableRightClick>

Answer 3

您可以轻松地执行以下操作：

<div class="container" (contextmenu)="onRightClick()"></div>

onRightClick(event) {
  event.preventDefault();
}

注意：此代码仅禁用您引用的 div 的右键单击。如果您想禁用所有页面，您可以使用：

@HostListener('contextmenu', ['$event'])
  onRightClick(event) {
  event.preventDefault();
}