Angular 2+模板切换Bootstrap单选按钮失效问题排查

针对你遇到的「手动切换active类和checked属性后，单选按钮视觉上仍未选中」的问题，我从Angular和Bootstrap的底层逻辑帮你梳理几个核心原因：

1. Bootstrap自定义单选按钮的样式逻辑不依赖active类 #

Bootstrap 4的自定义单选按钮，视觉选中效果是靠原生input的:checked伪类来触发的，而不是active类。它的核心CSS逻辑是这样的：

.custom-control-input:checked ~ .custom-control-label::before {
  /* 选中状态的样式 */
  background-color: #007bff;
  border-color: #007bff;
}

你手动给容器或标签加active类，只是模拟了点击时的交互状态，但不会触发Bootstrap定义的选中样式——只有原生input的checked DOM属性为true时，这个伪类样式才会生效。

2. 混淆了HTML属性（attribute）和DOM属性（property）的绑定 #

你提到已经设置了checked属性，但大概率是绑定了HTML属性（比如用[attr.checked]="condition"），而浏览器判断单选按钮是否选中，看的是DOM属性（element.checked）：

• HTML属性是初始值，页面加载完成后，浏览器会基于它初始化DOM属性，但后续修改HTML属性不会同步到DOM属性。
• Angular中，正确绑定DOM的checked属性应该用[checked]="condition"（不带attr.前缀），这样才能让浏览器识别到单选按钮的选中状态。

3. Angular变更检测或表单指令的覆盖 #

如果你的单选按钮绑定了Angular表单指令（比如ngModel或响应式表单的formControl），Angular会接管控件的状态管理。此时你手动修改DOM的checked属性或类，会被Angular的变更检测机制覆盖——因为Angular会以组件模型中的值为唯一来源，同步更新视图状态。
举个例子：如果你的模型值是false，哪怕你手动把DOM的checked改成true，下次变更检测触发时，Angular会把它改回false。

快速验证方法 #

• 打开浏览器开发者工具，定位到原生input元素，查看DOM属性面板（不是HTML属性）里的checked值是否为true。如果HTML属性有checked但DOM属性是false，就是绑定方式错了。
• 若使用了表单指令，尝试直接修改模型值（比如this.selectedValue = 'option1'），看单选按钮是否正常选中——这是Angular推荐的状态同步方式，也能避开手动DOM操作的冲突。

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