如何在“ mat-slide-toggle”上添加“ on”，“ off”标签？

Question

现在，我有一个像这样的幻灯片：

<mat-slide-toggle
    class="toggle">
</mat-slide-toggle>

如何添加如下所示的on，off标签？

Answer 1

您可以使用CSS进行破解，但这确实很hacky。在主机包装器组件.scss中：

:host {
  .mat-slide-toggle {
    &.mat-checked {
      ::ng-deep.mat-slide-toggle-bar::after {
        content: 'ON';
        font-size: 45%;
        font-weight: 700;
        color: black;
        position: absolute;
        left: 4px;
        top: -5px;
      }
    }
    &:not(.mat-checked) {
      ::ng-deep.mat-slide-toggle-bar::after {
        content: 'OFF';
        font-size: 45%;
        font-weight: 700;
        color: white;
        position: absolute;
        left: 21px;
        top: -5px;
      }
    }
  }
}

StackBlitz

Answer 2

角材料组件未构建为可扩展的 检查：https://github.com/angular/components/issues/10208

相反，您可以创建自己的自定义表单字段 检查：https://material.angular.io/guide/creating-a-custom-form-field-control