在 Angular 5 中使用 RouterLink 时，有什么方法可以将 disable/prevent 选项更改为 "Open in a new tab/window" 吗？

Question

我有一个单页应用程序，并在锚标记 () 中使用 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>

我需要在右键单击时禁用一些选项，例如 "Open in a new tab"、"Open in a new window" 等，而不是禁用整个上下文菜单，我需要上下文菜单。

我观察到，当我不使用 RouterLink 并实现其他导航逻辑时，我在右键单击时看不到我想要的那些选项。但是我正在使用 RouterLink，不想为了这样的要求而弄乱整个应用程序。

在使用 RouterLink 进行导航时，有什么方法可以禁用右键单击上下文菜单的一些选项吗？

Answer 1

你能像下面的例子那样在锚标签上尝试 oncontextmenu 事件吗？

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

Answer 2

尝试将其合并到您的代码中

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

Answer 3

右键单击的选项列表称为上下文菜单。有多种方法可以禁用它。前面提到的答案（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 应用程序中，links 'About' 和 'Services' 的上下文菜单被禁用，而 link 'Testing' 未修改。

说明: HostListener decorator declares a DOM event to listen to and provides a method for event handling. We listen to the contextmenu event which is usually triggered when the right mouse button or context menu key is clicked. In the implementation, the event's preventDefault() 方法被调用，它告诉浏览器它的默认操作不应该像通常那样执行。在我们的例子中，这会禁用上下文菜单打开。

从 here.

派生的应用程序

Answer 4

我找到了适合我的解决方法。我没有使用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]);
  }

在 Angular 5 中使用 RouterLink 时，有什么方法可以将 disable/prevent 选项更改为 "Open in a new tab/window" 吗？

Is there any way to disable/prevent options to "Open in a new tab/window" when using RouterLink in Angular 5?

javascript

routing

router

routerlink

angular