首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在角5中使用RouterLink时,是否有任何方法禁用/防止“打开新选项卡/窗口”的选项?

在角5中使用RouterLink时,是否有任何方法禁用/防止“打开新选项卡/窗口”的选项?
EN

Stack Overflow用户
提问于 2020-02-10 10:25:36
回答 4查看 2.5K关注 0票数 0

我有一个单独的页面应用程序,并且使用锚标记()中的RouterLink导航到其他页面,而不需要刷新。

代码语言:javascript
代码运行次数:0
运行
复制
<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进行导航时,是否可以在右键单击时禁用一些上下文菜单选项?

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2020-02-13 10:36:58

我找到了一个适合我的解决办法。我没有使用RouterLink,而是调用click事件并编写了一个方法"navigateTo",因此这个单击事件将调用我的"navigateTo“方法,该方法将完成页面导航的工作。

HTML文件

代码语言:javascript
代码运行次数:0
运行
复制
<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

代码语言:javascript
代码运行次数:0
运行
复制
  navigateTo(component) {
    this.router.navigate([component]);
  }
票数 0
EN

Stack Overflow用户

发布于 2020-02-10 13:57:27

右击中的选项列表称为上下文菜单。有多种方法来禁用它。前面提到的答案(oncontextmenu="return false;")是一个优雅的解决方案。

然而,由于这是一个与角度相关的问题,让我们编写一个属性指令:

代码语言:javascript
代码运行次数:0
运行
复制
import { Directive, HostListener } from '@angular/core';

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

现在可以使用[routerLink]指令将其传递给锚标记。就像。

代码语言:javascript
代码运行次数:0
运行
复制
<a routerLink="sample" appDisableRightClick>About</a>

StackBlitz

在StackBlitz应用程序中,对于“关于”和“服务”的链接禁用上下文菜单,而链接“测试”是不修改的。

解释性HostListener装饰器声明要侦听的DOM事件,并提供了事件处理的方法。我们监听contextmenu事件,该事件通常是在单击鼠标右键或上下文菜单键时触发的。在实现中,调用事件的preventDefault()方法,该方法告诉浏览器不应该像通常那样采取默认操作。在我们的例子中,它禁止打开上下文菜单。

应用程序从这里分叉。

票数 1
EN

Stack Overflow用户

发布于 2020-02-10 10:28:57

请您在锚上尝试oncontextmenu事件,如下面的示例所示。

代码语言:javascript
代码运行次数:0
运行
复制
<a href="https://www.google.com" oncontextmenu="return false;"> Link </a>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60148376

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档