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

Question

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

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

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

Answer 1

В угловыми 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

Answer 2

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

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