navigationend - ¿Angular 2 clic derecho eventos?

router events angular 6

Question

Estoy creando una aplicación web interactiva con Angular2 y estoy buscando una forma de capturar clics con el botón derecho en un componente angular. También debo evitar que el menú contextual del navegador aparezca con un clic derecho para poder mostrar mi propio menú contextual personalizado.

Sé que en angular 1, tenía que crear una directiva personalizada para capturar un evento de clic derecho. ¿Esto sigue siendo el caso en Angular 2, o está integrado en / hay una forma más fácil de hacerlo? He examinado algunas preguntas anteriores de SO, pero no están relacionadas con Angular2.

¿Cómo puedo realizar la captura de clics con el botón derecho y evitar que el menú contextual del navegador aparezca en Angular2?

Answer 1

En Angular 2+, puedes capturar cualquier evento como:

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

Tenga en cuenta que $event es opcional, y el retorno de la función es el retorno del controlador de eventos, por lo tanto, puede return false; para evitar la acción del navegador por defecto del evento.

En su caso, el nombre del evento es contextmenu . Entonces, tu 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í hay un ejemplo completo de trabajo:
http://on.gurustop.net/2E0SD8e