Angular12中Material实验版mat-slider报_getHostElement错误如何解决？

你触发该报错和样式异常的核心原因是实验版范围滑块的API调用和配置存在缺失，按以下步骤修正即可：

• 先验证版本匹配性：确保安装的@angular/material-experimental依赖版本和项目内@angular/core、@angular/material的版本完全一致，跨版本会导致内部API不兼容触发报错。
• 修正滑块HTML结构：实验版MDC范围滑块要求显式声明两个滑块拇指节点，你的代码缺少该配置导致组件内部找不到对应实例，调用_getHostElement时指向undefined。同时你原代码中的values属性未加方括号，实际传入的是字符串而非数值数组，修正后的代码如下：

<mat-slider discrete markers thumbLabel [min]="0" [max]="100" [step]="5" [values]="[10, 20]">
  <mat-slider-thumb></mat-slider-thumb>
  <mat-slider-thumb></mat-slider-thumb>
</mat-slider>

如果需要双向绑定值，更推荐使用响应式表单控件：

// 组件ts文件中
sliderValue = new FormControl([10, 20]);

<!-- 对应HTML -->
<mat-slider discrete markers thumbLabel [min]="0" [max]="100" [step]="5" [formControl]="sliderValue">
  <mat-slider-thumb></mat-slider-thumb>
  <mat-slider-thumb></mat-slider-thumb>
</mat-slider>

• 补充样式配置：你仅看到滑块背景条是因为缺少实验版滑块的主题样式导入，在全局styles.scss中添加如下配置：

@import '@angular/material-experimental/mdc-slider/theming';

// 将滑块主题纳入你项目的Angular Material全局主题配置
@include mat.slider-theme($你的项目自定义主题变量);

• 依赖检查：确认根模块中已导入BrowserAnimationsModule，所有Angular Material组件都依赖该动画模块正常运行。

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