web-dev-qa-db-ja.com

Angular 2つの右クリックイベント？

私はAngular2でインタラクティブなWebアプリケーションを構築していますが、angularコンポーネントの右クリックをキャプチャする方法を探しています。また、右クリックでブラウザのコンテキストメニューが表示されないようにする必要があります自分のカスタムコンテキストメニューを表示できます。

angular 1で、右クリックイベントをキャプチャするカスタムディレクティブを作成する必要がありました。これでもAngular 2または組み込み/それを行う簡単な方法はありますか？以前のSOの質問に目を通しましたが、Angular2とは関係ありません。

右クリックをキャプチャし、Angular2にブラウザのコンテキストメニューが表示されないようにするにはどうすればよいですか？

angularcontextmenu
20
JavascriptLoser

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

50
Meligy