在等待音乐加载的同时(离子2/Angular 2)

Question

在我的音乐应用中，我有一个"单击"函数，该函数发出了HTTP请求，并从服务器播放.mp3文件。我的问题是，有时该应用程序需要一段时间才能从服务器加载音频，这就是为什么我添加一个离子旋转器的原因。我正在尝试做到这一点，所以当音乐加载到this.media.load();中时，显示离子旋转器，并且完成加载旋转器后，则隐藏了旋转器。

我不知道是否要实施听众

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;