场景
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">
<!-- 父组件拿到子组件的传值后,进行回调--