У меня есть требование в моем проекте 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 и думаю, что наблюдаемые или функция обратного вызова могут работать, но я не смог реализовать это. Есть идеи?