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

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

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

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

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

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


javascript angular router routerlink routing
person Gaurav Soni    schedule 10.02.2020    source источник
comment
Это связано с генерируемым html. Использование [routerLink] создаст элемент привязки с атрибутом href. Браузер воспримет это как обычную ссылку и предложит любые параметры, которые он обычно запрашивает для ссылки. Похоже, вы уже экспериментировали с другими методами, которые работают для вас — почему бы не использовать их?   -  person Kurt Hamilton    schedule 10.02.2020
comment
Добавлен ответ, который сработал для меня   -  person Gaurav Soni    schedule 13.02.2020
comment
@KurtHamilton Да, я экспериментировал и нашел решение, которое работает, но мне кажется, что это патч, я искал более надежное решение.   -  person Gaurav Soni    schedule 13.02.2020

Ответы (4)


arrow_upward
1
arrow_downward

Список опций при щелчке правой кнопкой мыши называется контекстным меню. Есть несколько способов отключить его. Ответ, упомянутый ранее (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 объявляет событие DOM для прослушивания и предоставляет метод обработки событий. Мы слушаем событие contextmenu, которое обычно запускается при нажатии правой кнопки мыши или клавиши контекстного меню. В реализации вызывается метод события preventDefault(). который сообщает браузеру, что его действие по умолчанию не должно выполняться, как обычно. Что в нашем случае отключает открытие контекстного меню.

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

person Michael D    schedule 10.02.2020
comment
Привет, спасибо за ответ. Я не хочу полностью отключать контекстное меню, а только несколько опций. Я нашел обходной путь, сам добавил ответ - person Gaurav Soni; 13.02.2020

arrow_upward
0
arrow_downward

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

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

person Jasdeep Singh    schedule 10.02.2020
comment
Привет, спасибо за ответ. Я не хочу полностью отключать контекстное меню, а только несколько опций. Я нашел обходной путь, отвечая на вопрос сам сейчас. - person Gaurav Soni; 13.02.2020

arrow_upward
0
arrow_downward

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

<a href="https://www.w3schools.com/" oncontextmenu="return false;">W3schools</a>
person niranjan kishan    schedule 10.02.2020
comment
Привет, спасибо за ответ. Я не хочу полностью отключать контекстное меню, а только несколько опций. Я нашел обходной путь, сам добавил ответ - person Gaurav Soni; 13.02.2020

arrow_upward
-1
arrow_downward

Я нашел обходной путь, который работает для меня. Вместо использования RouterLink я вызвал событие клика и написал метод «navigateTo», поэтому это событие клика вызовет мой метод «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]);
  }
person Gaurav Soni    schedule 13.02.2020