右键单击打开matDialog时禁用上下文菜单-Angular 6

Question

好吧，我的问题在标题中，我想知道是否可以通过右键单击来打开垫对话框。

我正在尝试实现由右键单击触发的指令。在我的工作区上的元素上单击鼠标右键时，我希望打开一个显示属性/信息的模式。

我可以识别右键单击的元素，而无需上下文菜单。但是，当我触发对话框的选择时，上下文菜单又回来了。我怀疑覆盖物。

这是我的代码，有什么主意吗？

    import { Directive, HostListener, ElementRef, Component, Inject } from '@angular/core';
    import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

    export interface DialogData {
      animal: string;
      name: string;
    }

    @Directive({
      selector: '[appRightClick]'
    })
    export class RightClickDirective {

      animal: string;
      name: string;

      constructor(private el: ElementRef,
        public dialog: MatDialog) {
      }

      @HostListener('auxclick', ['$event'])
      auxclick(event) {
        this.openDialog()
      }

      @HostListener('contextmenu', ['$event'])
      contextmenu(event) {
        event.preventDefault();
      }


      openDialog(): void {
        const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
          width: '250px',
          data: { name: this.name, animal: this.animal }
        });

        dialogRef.afterClosed().subscribe(result => {
          console.log('The dialog was closed');
          this.animal = result;
        });
      }
    }


    @Component({
      selector: 'dialog-overview-example-dialog',
      templateUrl: 'dialog.component.html',
    })
    export class DialogOverviewExampleDialog {

      constructor(
        public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) {

      }

      //not working?
      @HostListener('contextmenu', ['$event'])
      contextmenu(event) {
        event.preventDefault();
      }

      onNoClick(): void {
        this.dialogRef.close();
      }

    }