Есть ли способ отключить / запретить варианты «Открыть в новой вкладке / окне» при использовании RouterLink в Angular 5?

Question

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

<ul class="menu">
          <li *ngIf="isContain(adminFilterMenuItems, 'Setup')">
            <a id="NavSetupButton" routerLink="/setup">
              <img alt="Setup" src="./assets/images/Setup.png" />
            </a>
          </li>
</ul>

У меня есть требование отключить несколько параметров при щелчке правой кнопкой мыши, таких как «Открыть в новой вкладке», «Открыть в новом окне» и т. Д. 1010 *, не отключать все контекстное меню, я Мне нужно контекстное меню.

Я заметил, что когда я не использую RouterLink и не использую другие логи c для навигации, я не вижу эти опции при щелчке правой кнопкой мыши, который я хочу. Но я использую RouterLink и не хочу связываться со всем приложением для такого требования.

Есть ли способ отключить несколько опций контекстного меню при щелчке правой кнопкой мыши при использовании RouterLink для навигации?

Answer 1

Список опций при щелчке правой кнопкой мыши называется контекстным меню. Есть несколько способов отключить его. Ответ, упомянутый ранее (oncontextmenu="return false;"), является элегантным решением.

Однако, поскольку это вопрос, связанный с Angular, давайте напишем директиву атрибута:

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appDisableRightClick]'
})
export class DisableRightClickDirective {
  @HostListener('contextmenu', ['$event']) onContextMenu($event: any) {
    $event.preventDefault();
  }
}

Теперь ее можно передать тегу привязки с помощью директивы [routerLink]. Например,

<a routerLink="sample" appDisableRightClick>About</a>

StackBlitz

В приложении StackBlitz контекстное меню для ссылок «О программе» и «Услуги» отключено, а ссылка «Тестирование» не изменена. .

---

Объяснение : HostListener decorator объявляет событие DOM для прослушивания и предоставляет метод для обработки события. Мы слушаем событие contextmenu, которое обычно запускается при нажатии правой кнопки мыши или клавиши контекстного меню. В реализации вызывается метод события preventDefault(), который сообщает браузеру, что его действие по умолчанию не должно выполняться, как обычно. Что в нашем случае запрещает открытие контекстного меню.

---

Приложение разветвлено с здесь .

Answer 2

Я нашел обходной путь, который работает для меня. Вместо использования RouterLink я вызвал событие click и написал метод "navigateTo", поэтому это событие click вызовет мой метод "navigateTo", который будет выполнять работу по навигации по страницам.

HTML Файл

<ul class="menu">
      <li *ngIf="isContain(adminFilterMenuItems, 'Setup')">
        <a id="NavSetupButton" (click)="navigateTo('/setup')">
          <img alt="Setup" src="./assets/images/Setup.png" />
        </a>
      </li>
</ul>

component.ts

  navigateTo(component) {
    this.router.navigate([component]);
  }

Answer 3

Попробуйте включить это в свой код

<a href="https://www.w3schools.com/" oncontextmenu="return false;">W3schools</a>

Answer 4

Можете ли вы попробовать событие oncontextmenu на привязке, как показано в примере ниже.

<a href="https://www.google.com" oncontextmenu="return false;"> Link </a>