Angular导航栏checkbox无法点击 选中后图标颜色不生效问题

问题根因 #

你当前的实现存在3个核心错误导致样式不生效：

1. CSS选择器逻辑错误：你使用的#btnDashboard:checked~.fa-tachometer-alt是同级后续兄弟选择器，但.fa-tachometer-alt图标是<label>的子元素，和<input>不是同级元素，选择器完全匹配不到目标元素
2. 表单绑定逻辑错误：[(ngModel)]绑定在了非表单控件的<label>标签上，不会对<input>的checked属性产生任何影响
3. 复选框天然不支持互斥：你用了3个独立的复选框，选中其中一个不会自动取消其他的选中状态，不符合导航栏单选的交互逻辑

修复方案 #

方案1（推荐，适配Angular路由特性） #

直接用Angular内置的routerLinkActive指令实现路由激活状态绑定，不需要依赖input的checked状态，逻辑更简洁，还能自动同步路由状态：

1. 新增CSS规则：

.menuButtonIcon.active i {
    color: #FF8A00FF;
}

2. 修改HTML中导航项的代码，给每个带routerLink的标签加routerLinkActive属性：

<li>
    <label for="btnDashboard" class="menuButtonIcon" routerLink="/researcher/dashboard" routerLinkActive="active">
        <i class="fas fa-tachometer-alt"></i>
    </label>
    <input type="checkbox" id="btnDashboard" checked>
</li>
<li>
    <label for="btnList" class="menuButtonIcon" routerLink="/researcher/list" routerLinkActive="active">
        <i class="fas fa-list-ul"></i>
    </label>
    <input type="checkbox" id="btnList">
</li>
<li>
    <label for="btnHeatMap" class="menuButtonIcon" routerLink="/researcher/heatmap" routerLinkActive="active">
        <i class="fas fa-map"></i>
    </label>
    <input type="checkbox" id="btnHeatMap">
</li>

修改后路由切换时会自动给对应激活的导航项加active类，图标自动变色。

方案2（保留原有input复选框/单选框逻辑） #

如果要继续用input的checked状态控制样式，做两处修改即可：

1. 修正CSS选择器：

#btnDashboard:checked + label .fa-tachometer-alt {
    color: #FF8A00FF;
}
#btnList:checked + label .fa-list-ul {
    color: #FF8A00FF;
}
#btnHeatMap:checked + label .fa-map {
    color: #FF8A00FF;
}

这里的+是相邻兄弟选择器，匹配input后紧跟的label元素，再选中label内的图标，就能正确触发样式。
2. 把input类型改为单选框实现互斥，将所有input的type属性改为radio，且设置相同的name属性：

<input type="radio" name="navMenuItem" id="btnDashboard" checked>
<input type="radio" name="navMenuItem" id="btnList">
<input type="radio" name="navMenuItem" id="btnHeatMap">

如果需要绑定ngModel，直接把[(ngModel)]加在input标签上即可。

内容的提问来源于stack exchange，提问作者A. Vreeswijk