Angular6默认上下文菜单

Posted 2023-03-05

【中文标题】Angular6默认上下文菜单

【英文标题】：Angular6 Default ContextMenu

【发布时间】：2019-11-21 08:12:35

【问题描述】：

我正在使用 Angular 6 开发一个项目，我使用 (click)="actionNavigateAway()" 将页面定向到新的 Url。这在 左键单击 上效果很好。但是在 右键单击 时，它会显示一个上下文菜单，其中包含Back、Reload 等选项（如第一张照片所示）。

相反，我想展示的是我们通常在右键单击链接时找到的默认上下文菜单（图 2）。我在网上搜索并找到了制作自定义上下文菜单的方法，但默认情况下没有。你能帮我吗？谢谢。

【问题讨论】：

你能在 stackblitz 中分享你的代码吗？

人们发布评论只是为了 50 个代表的答案，代表竞赛永远不会在这里结束：D

@javan.rajpopat 这些是不同的上下文菜单，因为上下文菜单的来源是不同的元素，在第二张图片中它说在新选项卡中打开 链接，因为它是链接，您不能将 div 打开到新标签中吗？以及自定义默认上下文菜单，出于某些安全原因，浏览器不允许您这样做。

【参考方案1】：

如果您需要使用 JS 来路由链接，但需要 href 上下文菜单 - 您可以同时使用。您可以添加空白 href 或任何 href，然后传递事件以防止函数出现默认值。像这样

<a href="/somepath" onclick="function(event)event.preventDefault()">This link has both</a>

现在，当您单击该 href 链接时，该页面不会尝试将您路由到“/somepath”。您可以向函数添加更多代码，或者使用 JS SPA 路由器来处理路由。您现在有 javascript 处理您的链接，和一个正常的上下文菜单。由于上下文菜单具有实际路径 - 当且仅当您选择在新选项卡中打开时，它才会实际打开。不是实际的点击

【参考方案2】：

看看this

如果a元素有href属性，那么它代表一个超链接 （超文本锚点）由其内容标记。

如果a元素没有href属性，则该元素代表a 可能放置链接的位置的占位符，如果它 是相关的，只包含元素的内容。

所以它不被视为超链接。 只需添加一个空的 href 属性。像这样，

  <a (click)="actionNavigateAway()">Not Working</a>
 <br/>
 <a href="" (click)="actionNavigateAway()">Working</a>

【参考方案3】：

右键单击具有href 属性的链接时，上下文菜单应该可以工作。

<a>This is a A tag without attributes</a><br>
<a href="#">This A tag has a href attribute</a><br>
<a onclick="hi()">This A tag has a onclick attribute</a><br>

这意味着您应该使用href 属性而不是点击处理程序。

尝试运行 sn-p 并右键单击不同的“链接”以了解我的意思。

【参考方案4】：

默认上下文菜单在链接上正常工作，没有人试图重现它是正常的^^

就您而言，唯一可能的问题是您没有正确瞄准链接

但您也可以像这样创建自定义上下文菜单：Angular 2: Implement a custom context menu