По умолчанию Angular поддерживает событие onclick для HTMLElement, но иногда вместо этого вы хотите использовать некоторые функции onrightclick, в этом случае вам придется справиться с этим самостоятельно, и я покажу вам, как этого добиться.

Шаг №1: Создайте новую директиву

Вместо того, чтобы копировать и вставлять код каждый раз, когда нам нужно это событие, мы создадим общую директиву Angular, которую можно будет использовать непосредственно на любом Element.

ng g d ./pathto/rightClick

Шаг №2: добавьте функцию @HostListener

@HostListener позволяет вам addEventListener на хост-элементе, в нашем случае нам нужно прослушивать mousedown событие.

mousedownEvent генерируется каждый раз, когда мышь щелкает элемент, у него есть свойство button, чтобы показать, какие кнопки мыши нажали на элемент, значение равно числу:

  • левая кнопка: 0
  • средняя кнопка (колесо прокрутки): 1
  • правая кнопка: 2

Итак, мы будем заботиться о событиях со значениями button: 2!

@HostListener('mousedown')
onClick() {
   const mouseEvent: MouseEvent = event as MouseEvent;
   if (mouseEvent.button !== 2) return;
   console.log(mouseEvent);
}

Шаг №3: Добавьте @Output для генерации событий!

Каждый раз, когда мы ловим MouseEvent, мы хотим передать событие хост-элементу.

Кроме того, поскольку мы создали эту директиву только для обработки событий щелчка правой кнопкой мыши; мы добавим bindingPropertyName к @Output с тем же селектором директив, например:

@Directive({
   selector: '[rtclick]'
})
export class RightClickDirective {
   @Output('rtclick') event = new EventEmitter<MouseEvent>();
   ...
}

Таким образом, мы сможем использовать его непосредственно на любом элементе, например:

<button (rtclick)="doSomething($event)"></button>

В функции @HostListener мы будем генерировать перехваченное событие вместо console.logstatement:

this.event.emit(mouseEvent);

Шаг № 4: Предотвратите действие браузера по умолчанию!

Как вы знаете, щелчок правой кнопкой мыши используется для отображения списка опций, доступных в браузере, таких как Проверка, и мы хотим предотвратить это, если пользователь щелкнул элемент!

Браузеры используют событие oncontextmenu для отображения этого списка параметров, поэтому, если мы вызвали ev.preventDefault() для этого события, мы можем это остановить.

Очевидно, что мы хотим preventDefault только для элемента, а не для всего приложения, поэтому нам нужно сначала проверить, является ли цель одним и тем же элементом или нет!

  • Мы внедрим ElementRef, чтобы получить элемент хоста:
constructor(private element: ElementRef<HTMLElement>) {}
  • Мы будем использовать метод Rxjs под названием fromEvent для прослушивания contextmenu events:
constructor(private element: ElementRef<HTMLElement>) {
   fromEvent<PointerEvent>(document.body, 'contextmenu').pipe(
      filter((ev: PointerEvent) => 
         ev.target === this.element.nativeElement && ev.button == 2))
   .subscribe((ev: PointerEvent) => {
      ev.preventDefault();
   });
}

Шаг 5. Используйте его!

Поскольку мы не определили, для каких элементов использовать эту директиву в selector, мы можем использовать ее для любого HTMLElement!

<button (rtclick)="doSomething($event)">Right Click</button>

КОД

import { Directive, ElementRef, EventEmitter, HostListener, Output } from '@angular/core';
import { filter, fromEvent } from 'rxjs';
@Directive({
   selector: '[rtclick]',
})
export class RightClickDirective {
   @Output('rtclick') event = new EventEmitter<MouseEvent>();
   constructor(private element: ElementRef<HTMLElement>) {
      this.event = new EventEmitter();
      fromEvent<PointerEvent>(document.body, 'contextmenu').pipe(
         filter((ev: PointerEvent) => ev.target === this.element.nativeElement && ev.button == 2))
      .subscribe((ev) => { ev.preventDefault(); });
   }
   @HostListener('mousedown')
   onClick() {
      const mouseEvent: MouseEvent = event as MouseEvent;
      if (mouseEvent.button !== 2) return;
      this.event.emit(mouseEvent);
   }
}

Проверьте код на Stackbiltz.