现有问题

根据playList/detail 的API拿到的数据是不完整的，tracks中只存在所有歌曲的前几条，因此要获取trackIds进而请求song/detail 的API。

---

实现

• home.component.html

 <!--热门歌单开始--><div class="down"><div class="down-wrap"><app-single-sheetclass="sheet-item"*ngFor="let item of songSheetList"[sheet]="item"(onPlay)="onPlaySheet($event)"></app-single-sheet></div></div><!--热门歌单结束-->

• single-sheet.component.html

<ng-container><a class="cover"><img [src]="sheet.picUrl" [alt]="sheet.name" /><div class="bottom"><div class="num"><i class="icon erji"></i><span>{{ sheet.playCount | playCount }}</span></div><i class="icon play" (click)="playSheet(sheet.id)"></i></div></a><span class="dec">{{ sheet.name }}</span>
</ng-container>

• single-sheet.component.ts

  @Output() onPlay = new EventEmitter<number>();playSheet(id: number){this.onPlay.emit(id)}

点击子组件，触发playSheet回调，将拿到的歌单ID发送给父组件

• home.componetn.ts

    // 点击歌单，获取歌单信息onPlaySheet (id: number) {this.sheetServe.playSheet(id).subscribe((list) => {this.store$.dispatch(SetSongList({ songList: list }));this.store$.dispatch(SetPlayList({ playList: list }));this.store$.dispatch(SetCurrentIndex({ currentIndex: 0 }));})}

• sheet.service.ts

    // 获取歌单详细信息playSheet (id: number): Observable<Song[]> {return this.getSongSheetDetail(id).pipe(pluck('trackIds'),switchMap(trackIds => this.getAllSongDetail(trackIds)))}// 获取歌单详情getSongSheetDetail (id: number): Observable<SongSheet> {const params = new HttpParams().set('id', id.toString());return this.http.get(this.url + "playlist/detail", { params }).pipe(map((res: { playlist: SongSheet }) => res.playlist));}// 获取全部歌单详情getAllSongDetail (trackIds: Song[]): Observable<Song[]> {const songArr = Array.isArray(trackIds) ? trackIds.slice() : [trackIds];const ids = songArr.map(item => item.id).join(',');const params = new HttpParams().set('ids', ids)return this.http.get(this.url + "song/detail", { params }).pipe(map((res: { songs: Song[] }) => res.songs), switchMap(songs => this.songServe.getSongList(songs)))}

父组件调用playSheet()时将会先调用getSongSheetDetail 来获取API返回值中的playList属性，在管道中通过pluck拿到其中的trackIds，这时通过getAllSongDetail 方法将所有ids发给song/detailAPI，将拿到的数据给到获取URL的API中，再将其拼接在一起即可返回所有数据

---

这样虽然能拿到很多数据，但通过对比发现会缺少一些数据，对于里边的参数不是很清楚，而且关于获取所有数据正确与否也尚待验证。目前这个数据量只是为了验证使用betterScroll插件是否执行，所以在埋一个坑，后需调整吧