Question

即使这在理论上不是特定于角度的，也需要在ng app中解决，并且所有示例均无作用。我已经看到了所有的答案，但是这些解决方案似乎都无法在现实生活中的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，所以我使用了它，但建议在跨度上方的链接中使用。

Answer 1

here中描述了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>

如何防止Angular应用中routerlink的默认点击行为？

1 个答案: