Angular 2 zdarzenia z kliknięcia prawym przyciskiem myszy?

Question

Buduję interaktywną aplikację internetową z Angular2 i szukam sposobu na przechwytywanie kliknięć prawym przyciskiem na element kątowy. Muszę również zapobiec wyświetlaniu menu kontekstowego przeglądarki po kliknięciu prawym przyciskiem myszy, aby wyświetlić własne niestandardowe menu kontekstowe.

Wiem, że w kanciastym 1 trzeba było utworzyć niestandardową dyrektywę, aby uchwycić zdarzenie z kliknięciem prawym przyciskiem myszy. Czy tak jest w przypadku Angular 2, czy jest on wbudowany/jest łatwiejszy sposób na zrobienie tego? Przejrzałem kilka poprzednich pytań SO, ale nie dotyczą one Angular2.

W jaki sposób mogę wykonać przechwytywanie kliknięć prawym przyciskiem i zapobiegać wyświetlaniu menu kontekstowego przeglądarki w Angular2?

Answer 1

kątowej 2+ można przechwytywać wszystkie zdarzenia jak:

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

Zauważ, że $event jest opcjonalny, a powrót funkcja to powrót procedury obsługi zdarzeń, więc możesz return false;, aby uniknąć domyślnej akcji przeglądarki ze zdarzenia.

W twoim przypadku nazwa zdarzenia to contextmenu. Tak, Twój kod może być coś takiego:

@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; 
    } 
} 

Oto pełny przykład roboczych:
http://on.gurustop.net/2E0SD8e

Answer 2

Nie można używać Javascript w szablonie Angular 2.

Ale może po prostu użyć biblioteki stron trzecich, takich jak angular2-contextmenu.