如何让Angular路由链接（routerLink）不可点击？

针对你给出的侧边栏路由链接，我整理了几种实用的方法来让routerLink变成不可点击状态，每种方法适配不同场景，你可以按需选择：

方法1：结合disabled视觉标记与CSS禁用交互 #

原生<a>标签的disabled属性不会自动阻止点击行为，所以我们需要配合CSS来完成功能+视觉的双重禁用：

先给目标链接添加条件式的样式类，再用CSS屏蔽点击：

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
  <a routerLink="/" [class.disabled-link]="!isLinkEnabled">Enter Order ID</a>
</li>

对应的CSS样式：

.disabled-link {
  pointer-events: none; /* 核心：禁用点击交互 */
  opacity: 0.6; /* 可选：添加半透明效果，视觉提示不可点击 */
  cursor: not-allowed; /* 可选：鼠标悬停显示禁止样式 */
}

这里的isLinkEnabled是你在组件中定义的布尔变量，用来控制链接的启用/禁用状态。

方法2：条件绑定routerLink失效路由 #

如果你希望链接在禁用时完全失去路由跳转功能，可以把routerLink动态绑定为null：

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
  <a [routerLink]="isLinkEnabled ? '/' : null" [class.disabled-link]="!isLinkEnabled">Enter Order ID</a>
</li>

当isLinkEnabled为false时，routerLink不会生效，点击链接也不会触发路由跳转，再配合上述CSS样式就能实现完整的不可点击效果。

方法3：直接阻止点击事件的默认行为 #

如果只是临时需要拦截某个链接的跳转，可以在点击事件中直接阻止默认行为：

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
  <a routerLink="/" (click)="!isLinkEnabled && $event.preventDefault()" [class.disabled-link]="!isLinkEnabled">Enter Order ID</a>
</li>

这种方式不需要修改路由绑定，直接通过事件拦截来禁用跳转，适合快速临时禁用的场景。

方法4：用ngIf替换为静态文本（可选） #

如果不需要保留链接的结构，只想展示不可点击的文本，可以用ngIf切换元素：

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}">
  <a *ngIf="isLinkEnabled" routerLink="/">Enter Order ID</a>
  <span *ngIf="!isLinkEnabled" class="disabled-text">Enter Order ID</span>
</li>

这种方式适合彻底隐藏可点击状态的场景，直接将链接替换为静态文本。

内容的提问来源于stack exchange，提问作者Aditya Singhal