Angular 12 点击导航栏首个按钮后后续按钮路由激活样式失效

算力阿峰

2026-9-24

问题根因

模板引用变量重名冲突：所有按钮都定义了相同的#link="routerLinkActive"模板引用变量，Angular在单模板作用域内同名变量会被后定义的内容覆盖，导致所有按钮的[class.btn-nav]="!link.isActive"绑定，实际读取的是最后一个home按钮的激活状态，而非当前按钮自身的激活状态，触发了样式逻辑异常。
冗余的类绑定逻辑没必要：你已经通过routerLinkActive="active-link"配置了激活时自动添加高亮类，完全不需要手动移除btn-nav类。你的两个类仅背景色不同，只要保证.active-link样式优先级更高，就能覆盖默认背景色，手动移除类反而增加了异常风险。

修复方案

删除所有按钮上的#link="routerLinkActive"和[class.btn-nav]="!link.isActive"两行冗余代码，routerLinkActive会自动处理激活类的添加/移除，同时可以把按钮上重复的align-content: center行内样式统一移到CSS中，精简代码。
优化CSS代码简化逻辑，同时保证激活样式优先级更高：

.container {
    float: right;
    background-color: rgb(199, 199, 199); 
}

.btn-nav {
    display: inline-block;
    background: transparent;
    border: 1px solid black;
    height: 60px;
    width: 60px; 
    margin: 11px;
    border-radius: 15px;
    cursor: pointer;
    align-content: center;
}

/* 激活状态仅需写差异化属性，双类选择器优先级更高，会自动覆盖默认背景色 */
.btn-nav.active-link {
    background: white;
}

.img {
  height: 45px;
  width: 45px;
  margin-top: 5px;
}