通过单击事件处理程序防止 routerLink 更改路由

Posted 2023-03-13

【中文标题】通过单击事件处理程序防止 routerLink 更改路由

【英文标题】：Preventing routerLink Changing Routes with click Event Handler

【发布时间】：2016-12-31 23:17:45

【问题描述】：

我的 Angular 应用程序包含一个锚标记，该标记具有与之关联的 routerLink 和 click 处理程序：

<a [routerLink]="/abc" (click)="onClick"> </a>

我希望在用户右键单击并选择“在新选项卡中打开”时使用routerLink。

如果用户只是左键单击链接，则应触发click 处理程序。在这种情况下，我确实不希望routerLink 触发路由更改。

在我的点击处理程序中，我尝试过中止点击事件，即

public onClick(event: MouseEvent): 
    // Was hoping this would do it...
    event.preventDefault();
    // .. clutching at straws
    event.stopPropagation();
    // .. oh dear oh dear. Still not working
    event.stopImmediatePropagation();

这些都不会阻止routerLink 激活和导航新路线/abc。如何让我的click 处理程序防止routerLink 被解雇？

【问题讨论】：

您是否尝试添加target="_blank"？让它总是在新标签页中打开？另见***.com/questions/36985112/…

@GünterZöchbauer 这不是我想要的行为。如果用户左键单击链接（在新选项卡或其他选项卡中），我确实不想要打开路线。

但是您确实想使用右键单击在新选项卡中打开吗？

@GünterZöchbauer 仅当用户从上下文菜单（或类似菜单，取决于浏览器）中选择“在新选项卡中打开”时

您可以考虑实现您的自定义 RouterLink 指令，该指令源自集成指令。

【参考方案1】：

如果您想手动处理 <a> 上的导航，请在模板中删除 routerLink 指令。

<a href=# (click)="onClick"> </a>

使用href=# 上方的通知是因为，它会模拟，就好像链接没有任何变化，即您仍然会像普通<a> 一样看到悬停指针，否则您可以省略它并添加您的自定义类。

而是在您的onClick 中适当地处理它。

constructor(private router:Router)

public onClick()

// Handle routing here or whatever behavior you want
this.router.navigate(['./abc']);