Angular中如何解决非路由链接始终处于激活状态的问题？

核心原因 #

你给注销项设置的空链接routerLink=""会被Angular Router解析为应用根路径/，即便加上exact: true，也会因路由匹配逻辑的特殊性导致它始终被判定为激活状态——更关键的是，注销按钮本就不属于路由导航项，完全没必要使用routerLink和routerLinkActive指令。

具体解决方案 #

方案1：移除路由相关指令，直接绑定点击事件

这是最合理的做法，因为注销是触发业务逻辑而非路由跳转：

<!-- 原错误写法 -->
<a routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="logout()">注销</a>

<!-- 修改后 -->
<a (click)="logout()">注销</a>

如果需要给注销按钮添加固定样式，直接写CSS类即可，不需要依赖路由激活状态指令。

方案2：手动控制激活状态（若需保留routerLink）

如果因某些场景必须保留routerLink，可以通过[class.active]手动控制激活状态，强制设置为不激活：

<a routerLink="" [class.active]="false" (click)="logout()">注销</a>

方案3：使用无效路由并阻止跳转（不推荐）

若一定要用routerLinkActive但不想让它匹配任何有效路由，可以设置一个不存在的路由路径，并阻止默认跳转行为：

<a routerLink="/invalid-logout-path" routerLinkActive="active" (click)="logout(); $event.preventDefault()">注销</a>

这种方式纯属曲线救国，仅在特殊场景下临时使用，优先推荐方案1。

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