Estoy construyendo una aplicación web interactiva con Angular2 y estoy buscando una manera de capturar el derecho hace clic en un componente angular. Yo también deben impedir el menú contextual del navegador que aparece en un clic derecho para que yo pueda mostrar mi propio menú contextual personalizado.

Sé que en angular 1, había que crear una directiva para capturar un clic derecho evento. Es este sigue siendo el caso en el Angular de 2, o es construido en/hay una manera más fácil de hacerlo? He echado un vistazo a través de algunos de los anteriores, por LO que los temas pero no se relacionan con la Angular2.

¿Cómo puedo realizar la captura de la derecha clics y prevenir el menú contextual del navegador aparezca en Angular2?

OriginalEl autor JavascriptLoser | 2017-01-16

1 Comentario

  1. 47

    Angular 2+, usted puede capturar cualquier evento como:

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

    Nota que $event es opcional, y el retorno de la función es el regreso del controlador de eventos, así que usted puede return false; para evitar el navegador predeterminado de acción del evento.

    En su caso, el nombre del evento es contextmenu. Así, el código puede ser algo como esto:

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

    Aquí un ejemplo de trabajo:

    http://on.gurustop.net/2E0SD8e

    ¿Cómo podemos hacer lo mismo para la página completa? Quiero deshabilitar el clic derecho para toda la página
    Sí, usted puede utilizar @HostListener('document:contextmenu', ['$event']), aquí una actualización ejemplo: embed.plnkr.co/YasKxNbBDwbFXw96LCr1/?show=src%2Fapp.ts,vista previa Si necesita hacerlo de forma dinámica, siga stackoverflow.com/questions/35080387/…
    Gracias!! Este trabajó como un encanto! yay!

    OriginalEl autor Meligy

Dejar respuesta

Please enter your comment!
Please enter your name here