Angular 2 события щелчка правой кнопкой мыши?

Я создаю интерактивное веб-приложение с Angular2, и я ищу способ захвата щелчков правой кнопкой мыши на компоненте angular. Мне также необходимо запретить контекстное меню браузера, щелкнув правой кнопкой мыши, чтобы я мог отображать собственное пользовательское контекстное меню.

Я знаю, что в angular 1 вам нужно было создать настраиваемую директиву для захвата события правого клика. Это все еще имеет место в angular 2, или он встроен/есть ли более простой способ сделать это? Я просмотрел некоторые предыдущие вопросы SO, но они не относятся к Angular2.

Как я могу выполнить захват правых кликов и предотвращение появления контекстного меню браузера в Angular2?

Ответ 1

В Angular 2+ вы можете записать любое событие, например:

<div (anyEventName)="whateverEventHandler($event)">
</div>

Обратите внимание, что $event является необязательным, а возврат функции является возвратом обработчика события, поэтому вы можете return false; избежать действия браузера по умолчанию из события.

В вашем случае имя события contextmenu. Итак, ваш код может быть примерно таким:

@Component({
  selector: 'my-app',
  template: `
    <div (contextmenu)="onRightClick($event)">
      Right clicked
      {{nRightClicks}}
      time(s).
    </div>
  `,
  // 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

Ответ 2

Вы не можете использовать Javascript в шаблоне Angular 2.

Но вы можете просто использовать сторонние библиотеки, такие как angular2 -contextmenu.