javascript - 如何使用 angular2 或 typescript 在切换按钮上取消订阅和订阅单词

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>

WORKING DEMO

---

旧版本:

刚刚添加的样式:

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

WORKING DEMO