如何从HTML DOM元素中获取Angular mat-slide-toggle组件的开关状态值

你用getAttribute获取不到checked值是因为[checked]是Angular Material mat-slide-toggle组件的输入属性，属于组件的动态property，不是静态的HTML attribute。你写死的attX是静态HTML属性，所以getAttribute能拿到，而动态绑定的checked状态只存在于组件实例的property或者内部原生表单元素的property里，不会同步到HTML attribute上。

下面是两种可行的解决方案：

方案1（更推荐）：直接获取mat-slide-toggle组件实例的checked属性 #

这种方式不需要操作底层DOM，直接读组件的公开属性即可，是Angular组件测试的标准写法：

// 先导入依赖
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { By } from '@angular/platform-browser';

// 获取mat-slide-toggle组件实例
const toggle = fixture.debugElement.query(By.css('my-container mat-slide-toggle')).componentInstance as MatSlideToggle;

// 直接获取布尔类型的选中状态
const isChecked = toggle.checked;

方案2：从DOM层获取内部原生checkbox的状态 #

如果你确实需要从原生DOM层面读取，可以直接取mat-slide-toggle内部封装的原生checkbox元素的checked属性：

const toggleNativeCheckbox = fixture.nativeElement.querySelector('my-container mat-slide-toggle input[type="checkbox"]') as HTMLInputElement;

// 原生input的checked属性就是实时的布尔类型选中状态
const isChecked = toggleNativeCheckbox.checked;

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