从列表中选择一个项目，然后显示它

Question

我有一个模态，其中列出了不同的声音，用户必须选择其中一种，然后将其显示在主页上

模式页面：

<ion-content text-center>

<ion-card>
  <div data-tap-disabled="true">
    <audio preload="auto" controls #audio>
      <source src="/assets/musics/sound1.mp3">
      </audio>
  </div>

</ion-card>

<ion-card>  
    <div data-tap-disabled="true">
      <audio preload="auto" controls #audio>
        <source src="/assets/musics/sound2.mp3">
        </audio>
    </div>
  </ion-card>

</ion-content>

最好的方法是什么？

EDIT1：模态响应：

modal.onDidDismiss().then((responseModal: OverlayEventDetail) =>{
      if(responseModal !== null){
        console.log(responseModal.data.music);
      }
    })

PS：音乐只是实际音乐的来源。

Answer 1

您应该创建另一个页面，并像<div (click)="onClickSound(audio)" data-tap-disabled="true">一样设置onclick，并在NavParams中发送声音：

onClickSound(sound) {
    this.navCtrl.push(OtherPage, {
        sound
    });
}