javascript - 等待音乐加载时的 ionic 旋转器( ionic 2/Angular 2)

Question

在我的音乐应用程序中，我有一个“单击”功能，可以发出 http 请求并从服务器播放 .mp3 文件。我的问题是，有时应用程序需要一段时间才能从服务器加载音频，这就是我添加 ionic 旋转器的原因。我试图做到这一点，以便当音乐在 this.media.load(); 中加载时显示 ionic 旋转器，加载完成后隐藏旋转器。

我不知道是否需要实现监听器

Home.html

<ion-card-content (click)="play(sound)">
      <div class="wrapper">
      <ion-spinner class="color-green" name="bubble"></ion-spinner>
      <img src="{{ sound.imageUrl }}" />       
      </div>     
</ion-card-content>

Home.ts

/* Plays a sound, pausing other playing sounds if necessary */
  play(sound) {
    console.log(sound)
    if(this.media) {      
    this.media.pause();      
    }
   this.media = new Audio(sound.file);    
   this.media.load();
   this.media.play();
 }

Answer 1

您需要将 *ngIf 添加到微调器

<ion-spinner class="color-green" name="bubble" *ngIf="showSpinner"></ion-spinner>

然后是.ts文件

showSpinner:boolean;
...
// On the click action set to true
this.showSpinner = true;
// When the http returns with the audio file set to false
this.showSpinner = false;