Angular 2右鍵單擊事件？

Question

我正在用Angular2構建交互式Web應用程序，我正在尋找一種方法來捕獲角度組件上的右鍵單擊。我還需要防止瀏覽器上下文菜單出現在右鍵單擊，所以我可以顯示我自己的自定義上下文菜單。

我知道在角度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

您不能在Angular 2模板中使用Javascript。

但是你可以簡單地使用第三方庫，如angular2-contextmenu.