[Angular实战网易云]——9、处理歌单数据

场景

home首页渲染歌单列表，再点击列表的播放图标之后获取单个歌单的信息（应包含歌曲的URL，以便于在首页底部添加播放）

---

组件传参

歌单的列表是嵌套在父组件中的单独组件，所以再点击子组件时，将获取得到ID广播到父组件，父组件拿到之后再做处理。

• single-sheet.component.html

</div>
<!--歌单点击事件-->
   <i class="icon play" (click)="playSheet(sheet.id)"></i>
 </div>

• single-sheet.component.ts

export class SingleSheetComponent implements OnInit {
   

  @Output() onPlay = new EventEmitter<number>();

  playSheet(id: number){
   
    this.onPlay.emit(id)
  }
}

子组件将拿到的ID广播出去

• home.component.html

<!--热门歌单开始-->
         <div class="down">
           <div class="down-wrap">
            <!-- 父组件拿到子组件的传值后，进行回调--