如何使用angular2或打字稿在切換按鈕上取消訂閱和訂閱單詞

Question

我有一個切換按鈕，在切換按鈕的拇指上已subscribe了該按鈕，並且默認情況下已啟用它。 因此，當我禁用切換按鈕時，它必須在按鈕上顯示單詞unsubscribe 。。因此，我希望切換按鈕的拇指在啟用時顯示subscribe ，在禁用時unsubscribe 。 請幫忙。

HTML：

<md-slide-toggle class="showToggle" name="subscribe"required></md-slide-toggle>

CSS：

.toggle{
  margin: auto;
}
.toggle .mat-slide-toggle{
  margin: auto auto auto 70px;
}
.toggle .mat-slide-toggle-bar{
  padding: 20px 100px;
  border-radius: 18px;
  background-color: #654898 ;
}
.toggle .mat-slide-toggle-thumb{
  padding: 10px 50px 30px 50px;
  background-color: #b755ff ;
  border-radius: 25px;
  top: 3px !important;
  border:1px solid white;
}
.toggle .mat-slide-toggle-thumb:before{
  content: 'subscribe';
  margin-left:-28px !important;
}
.toggle .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container{
  padding: 10px 70px;
}
.toggle input[type=checkbox], .toggle input[type=radio]{
  margin: 7px 0 0 !important;
}

Ts：

public device:boolean = true;

Answer 1

您可以簡單地實現：

<mat-slide-toggle [(ngModel)]="device" #slider>
  {{ slider.checked ? 'Unsubscribe' : 'Subscribe' }}
</mat-slide-toggle>

工作演示

---

舊版本：

剛剛添加的樣式：

.showToggle.mat-checked .mat-slide-toggle-thumb:before{
  content: 'unsubscribe';
  margin-left:-28px !important;
}

工作演示

Answer 2

您可以添加2條新的CSS規則：

::ng-deep .toggle.subscribe .mat-slide-toggle-thumb:before{
  content: 'subscribe';
}
::ng-deep .toggle.unsubscribe .mat-slide-toggle-thumb:before{
  content: 'unsubscribe';
}

對我們來說最有趣的部分是.toggle.subscribe和.toggle.unsubscribe 。 要啟用/禁用此規則，我們需要向ul元素添加subscribe或unsubscribe類，並基於此類，將應用上述規則之一。 我們可以使用[ngClass]觸發類：

<ul class="toggle" [ngClass]="{'subscribe': device, 'unsubscribe': !device}">

您可以更改CSS並將[ngClass]添加到任何其他元素，例如，我與ul合作。

這是工作示例： https : //stackblitz.com/edit/angular-wohxyw?file= app/ slide-toggle-overview-example.html