angular - 如何在 mat-slide-toggle 中添加“开”、“关”标签？

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

Angular 材料组件不是构建为可扩展检查：https ://github.com/angular/components/issues/10208

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