如何防止角度应用程序中路由器链接的默认点击行为？答案

【问题标题】：How to prevent default click behavior of a routerlink in angular app?如何防止角度应用程序中路由器链接的默认点击行为？
【发布时间】：2019-10-26 20:06:27
【问题描述】：

尽管这在理论上不是特定于角度的，但它需要在 ng app 中解决，并且所有示例都不起作用。我已经看到了 SO 中的所有答案，但这些解决方案似乎都不适用于现实生活中的 Angular7 应用程序。例如，以下都不起作用：

<!-- option 1 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation()">Properties
</a>
<!-- option 2 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation();false">Properties
</a>
<!-- option 3 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault()">Properties
</a>
<!-- option 4 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault();false">Properties
</a>

在 component.ts 中为处理程序创建一个方法并在返回或不返回 false 的情况下调用任何一个函数也不起作用。

另外，我不想禁用链接，因为它需要在其他浏览器选项卡/窗口中可拖动/可打开。

编辑：这是https://github.com/angular/angular/issues/21457，我可以通过在锚点内添加一个元素并单击内部元素来使其工作，如下所示：

(click)="$event.stopPropagation();$event.preventDefault()"

我的真实世界示例在锚点内有 mat-icon，所以我使用它，但建议在跨度上方的链接中。

【问题讨论】：

我个人使用过 return false ，它就像一个魅力。你能创建一个 plunkr 吗？
感谢您的评论！ (click)="return false" 在 compiler.js TemplateParser 中抛出 syntaxError。我也试过了。
.使用这个。
@AyatullahRahmani：为什么会这样？
您可能正在寻找的是CanDeactivate 守卫。 angular.io/api/router/CanDeactivate

标签： javascript html angular typescript angular-routing

【解决方案1】：

routerLink 不尊重preventDefault 的原因描述为here。

解决方案是为锚点创建内部元素（如果还没有锚点）（如图标）。在上面的链接中，内部创建了一个跨度，但我在锚点中有图标，为了清楚起见，我从问题中省略了这些图标：

  <a class="nav-link" [routerLink]='["/map", sessionId]'>
    <mat-icon class="tab-nav-item-icon" (click)="$event.stopPropagation();$event.preventDefault()">map</mat-icon>
  </a>

【讨论】：