如何在Angular中为PrimeNG开关按钮添加ON/OFF文本

方法一：使用组件原生属性（推荐） #

PrimeNG的InputSwitch组件原生支持配置开关状态标签，直接通过onLabel和offLabel属性即可实现，无需额外CSS：

<p-inputSwitch onLabel="ON" offLabel="OFF"></p-inputSwitch>

方法二：CSS自定义样式（解决之前CSS失效问题） #

如果需要更个性化的样式，由于Angular的样式隔离机制，需要用样式穿透修改组件内部DOM。在组件的CSS/SCSS文件中添加以下代码：

/* 选中状态显示ON标签 */
:host ::ng-deep .p-input-switch.p-input-switch-checked .p-input-slider::before {
  content: "ON";
  position: absolute;
  left: 28px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* 未选中状态显示OFF标签 */
:host ::ng-deep .p-input-switch:not(.p-input-switch-checked) .p-input-slider::before {
  content: "OFF";
  position: absolute;
  right: 28px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

/* 可选：调整滑块宽度，给标签留出足够空间 */
:host ::ng-deep .p-input-switch .p-input-slider {
  width: 56px;
}

注：:host ::ng-deep用于突破Angular的样式隔离，确保样式能作用到PrimeNG组件的内部元素，这也是之前CSS尝试失败的常见原因。

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