web-dev-qa-db-fra.com

Angular 2 événements liés à un clic droit?

Je construis une application Web interactive avec Angular2 et je cherche un moyen de capturer des clics droits sur un composant angular. Je dois également empêcher le menu contextuel du navigateur d'apparaître sur un clic droit afin de pouvoir afficher mon propre menu contextuel personnalisé.

Je sais que dans angular 1, vous deviez créer une directive personnalisée pour capturer un événement clic droit. Est-ce toujours le cas dans Angular 2, ou est-il intégré/existe-t-il un moyen plus simple de le faire? J'ai jeté un coup d'œil à quelques SO questions précédentes, mais elles ne concernent pas Angular2.

Comment puis-je obtenir des clics droits en empêchant le menu contextuel du navigateur d'apparaître dans Angular2?

angularcontextmenu
20
JavascriptLoser

Dans Angular 2+, vous pouvez capturer tout événement tel que:

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

Notez que $event est facultatif, et le retour de la fonction est le retour du gestionnaire d’événements. Vous pouvez donc return false; pour éviter l’action du navigateur par défaut de l’événement.

Dans votre cas, le nom de l'événement est contextmenu. Donc, votre code peut être quelque chose comme ça:

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

Voici un exemple de travail complet:
http://on.gurustop.net/2E0SD8e

50
Meligy