Angular 2 Rechtsklick-Ereignisse?

Question

Ich baue eine interaktive Webanwendung mit Angular2 und ich suche nach einer Möglichkeit, richtige Klicks auf eine eckige Komponente zu erfassen. Ich muss auch verhindern, dass das Kontextmenü des Browsers bei einem Rechtsklick angezeigt wird, damit ich mein eigenes benutzerdefiniertes Kontextmenü anzeigen kann.

Ich weiß, dass Sie in Winkel 1 eine benutzerdefinierte Direktive erstellen mussten, um ein Rechtsklick-Ereignis zu erfassen. Ist dies in Angular 2 immer noch der Fall oder ist es eingebaut/gibt es einen einfacheren Weg? Ich habe mir einige frühere SO-Fragen angeschaut, aber sie beziehen sich nicht auf Angular2.

Wie kann ich die Erfassung richtiger Klicks durchführen und verhindern, dass das Browser-Kontextmenü in Angular2 angezeigt wird?

Answer 1

In Angular 2+ verwenden zu können, wie jedes Ereignis erfassen kann:

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

Beachten Sie, dass $event ist optional, und die Rückkehr von Die Funktion ist die Rückkehr des Ereignishandlers, so können Sie return false; Standard-Browser-Aktion von dem Ereignis zu vermeiden.

In Ihrem Fall ist der Ereignisname contextmenu. So können Sie Ihren Code so etwas wie dieses:

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

Hier ist ein voll funktionierendes Beispiel:
http://on.gurustop.net/2E0SD8e

Answer 2

Sie können Javascript in der Angular 2 Vorlage nicht verwenden.

Aber Sie können einfach Bibliotheken von Drittanbietern wie angular2-contextmenu.