如何在Angular 16 Material中始终显示滑块拇指标签？

Angular 16 Material基于MDC重构了滑块组件，旧版本的样式类名已变更，以下是适配的有效方案：

1. 模板基础配置 #

确保滑块组件添加thumbLabel属性，同时可通过displayWith自定义标签显示内容：

<mat-slider
  thumbLabel
  [displayWith]="formatLabel"
  min="0"
  max="100"
  value="50">
</mat-slider>

组件类中自定义标签文本的示例（可选）：

formatLabel(value: number): string {
  if (value >= 100) {
    return '100%';
  }
  return `${value}`;
}

2. 样式覆盖（两种实现方式） #

方式一：组件内样式（用::ng-deep穿透视图封装） #

在组件的CSS/SCSS文件中添加：

::ng-deep .mat-mdc-slider {
  .mat-mdc-slider-thumb-label {
    opacity: 1 !important;
  }

  .mat-mdc-slider-thumb {
    &:hover + .mat-mdc-slider-thumb-label,
    &:focus + .mat-mdc-slider-thumb-label {
      opacity: 1 !important;
    }
  }

  // 可选：调整标签文本样式
  .mat-mdc-slider-thumb-label-text {
    font-size: 12px;
    color: #fff;
  }
}

方式二：全局样式（无需::ng-deep） #

在项目全局样式文件（如styles.scss）中添加：

.mat-mdc-slider-thumb-label {
  opacity: 1 !important;
}

.mat-mdc-slider-thumb:hover + .mat-mdc-slider-thumb-label,
.mat-mdc-slider-thumb:focus + .mat-mdc-slider-thumb-label {
  opacity: 1 !important;
}

补充：禁用状态下的标签显示 #

若滑块设置为disabled，可额外添加样式确保标签可见：

::ng-deep .mat-mdc-slider.mat-mdc-slider-disabled .mat-mdc-slider-thumb-label {
  opacity: 1 !important;
  color: rgba(0,0,0,0.54);
}

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