получить событие click внутри contextMenu в Angular - PullRequest
0 голосов
/ 15 февраля 2020

У меня есть требование в моем проекте Angular8, чтобы пользователь хотел иметь возможность открывать элементы меню боковой панели (все они являются тегами привязки) на другой странице.

Поскольку это уже сделано, средний щелчок не работает, и щелчок правой кнопкой мыши> открытие на новой вкладке ведет к домашней странице приложения из-за внешних служб аутентификации.

Поэтому я создаю директиву под названием link.directive.ts , которые используют в качестве ввода значение routerlink привязки для продолжения этих событий

  • щелчок левой кнопкой мыши (переход на другую страницу в том же окне) [ готово]
  • средний щелчок (открыть в другом окне) [также готово]
  • щелчок правой кнопкой мыши -> открыть на новой вкладке (СЛЕДУЕТ открыть выбранная ссылка в другом окне)

link.directive.ts код

import {Directive, HostListener, Input, ElementRef} from '@angular/core';
import { bindCallback } from 'rxjs';
import { Observable } from 'apollo-link';

function getWindow(): any {
 return window;
}

@Directive({
 selector: '[appRouterLink]'
})
export class LinkDirective {

 // tslint:disable-next-line: no-input-rename
 @Input('routerLink') link: string;
 router: any;
   constructor(
     private el: ElementRef,
     ) {
 }

 @HostListener('auxclick', ['$event']) onAuxClick($event) {
   if ($event.which === 2) {
     console.debug(" middle click ! ! !! ");
     $event.preventDefault();
     $event.stopPropagation();
     getWindow().open(this.link || '');
   }
 }

 @HostListener('click', ['$event']) onClick($event) {
   if ($event.ctrlKey) {
     $event.preventDefault();
     $event.stopPropagation();
     getWindow().open(this.link || '');
   }
 }

 @HostListener('oncontextmenu', ['$event']) onContextMenu($event) {
   if ($event.ctrlKey) {
     console.debug(" CLICK INSIDE CONTEXTMENU ");
     $event.preventDefault();
     $event.stopPropagation();
     getWindow().open(this.link || '');
   }
 }

 @HostListener('mousedown', ['$event']) onMouseDown($event) {
   if ($event.which === 3) {
     let clickHandler = function (e) {
       setTimeout(this.leftClickHandler(e), 2000)
       if (e.which === 1) {
         console.debug(" RIGHT CLICK WITH LEFT CLICK ");
           getWindow().open(this.link || '');
       }
     }
   }
 }

 private leftClickHandler(e) {
   if (e.button === 1) {
     console.debug(" RIGHT CLICK WITH LEFT CLICK ");
     // $event.preventDefault();
     // $event.stopPropagation();
     getWindow().open(this.link || '');
   }
  }
}

Я не могу обработать левый щелчок внутри контекстного меню, я знаю, что JS asyn c язык, но как я могу вернуть событие и использовать его внутри другое событие?

Я начинаю с TypeScript / Angular и думаю, что наблюдаемые или функция обратного вызова могут работать, но я не смог реализовать это. Есть идеи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...