javascript - 如何防止角度应用程序中路由器链接的默认点击行为?
问题描述
尽管这在理论上不是特定于角度的,但它需要在 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,所以我使用它,但建议在跨度上方的链接中使用。
解决方案
此处preventDefault
描述了routerLink 不尊重的原因。
解决方案是为锚点创建内部元素(如果还没有)(如图标)。在上面的链接中,内部创建了一个跨度,但我在锚点中有图标,为了清楚起见,我从问题中省略了这些图标:
<a class="nav-link" [routerLink]='["/map", sessionId]'>
<mat-icon class="tab-nav-item-icon" (click)="$event.stopPropagation();$event.preventDefault()">map</mat-icon>
</a>
推荐阅读
- python - 如何避免 az ml run --submit-script 命令中出现错误“conda --version: conda not found”?
- flutter - canvas.drawImage 将焦点更改为中心
- laravel - Laravel 没有从 Postman 获取数据
- c - 堆栈框架内的内存是如何组织的?
- android - Numberpicker 发送数据到 HomeFragment (Fragment to Fragment)
- sql - 如何插入方括号中的 char 值。获取错误列“值”在“表”中不存在?
- sed - 图案和空格之间的Grep文本
- linux - Linux 内核如何确定函数参数在 CPU 寄存器中的位置?
- swift - 在结构中初始化所有存储属性之前使用“自我”
- lotus-notes - Domino 访问服务 API 出现“无效的通用 ID”错误