Javascript 如何防止angular应用程序中routerlink的默认单击行为？

尽管这在理论上不是特定角度的，但需要在ng应用程序中解决，并且所有示例都不起作用。我在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>

---

我的现实世界示例在锚点内有mat图标，因此我使用该图标，但在链接上方建议使用内部跨距。

描述了routerLink不尊重

preventDefault

的原因

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

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

地图

我个人使用了return false，它就像一个符咒。你能创建一个plunkr吗？谢谢你的评论！（单击）=“return false”在compiler.js TemplateParser中抛出语法错误。我也试过。使用这个。@AyatullahRahmani:为什么会这样？你可能要找的是

CanDeactivate

guard。

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