如何在ionic3上的一个按钮中使用播放/暂停

Question

我在ionic3中开发了一个新的移动音乐应用

现在在我的项目中，我有两个按钮

1。play按钮

2. pause按钮

我需要一些帮助

当用户点击play按钮时，play按钮将隐藏并显示pause按钮。如果用户再次点击pause按钮，则需要显示play按钮

如何在ionic3中执行此操作？

Answer 1

您不需要显示/隐藏两个按钮。您只需切换图标即可显示play或pause。

<button ion-button (click)='startStopPlaying()' >
  <ion-icon [name]="isPlaying ? 'pause' : 'play' ">
</button>

在控制器上：

startStopPlaying () {
  //your logic to play pause
  if(this.isPlaying) {
    //pause here
  } else {
    //play here
  }
  this.isPlaying = !this.isPlaying;
}

这样，两个动作都可以使用相同的按钮