歌单详情

场景

在首页和歌单列表页，点击歌单图片能够查看当前歌单的详细信息，包括歌单内的歌曲

创建新模块

  ng g m sheet-info --routingng g c sheet-info

api接口是之前就写好的，所以api不会有什么变化，但是需要使用路由守卫来拦截数据。

sheet.service.ts

 // 获取歌单详情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));}

sheet-info-resolver.service.ts

@Injectable()
export class SheetInfoResolverService implements Resolve<SongSheet>{constructor(private sheetServer: SheetService) { }resolve (route: ActivatedRouteSnapshot): Observable<SongSheet> {return this.sheetServer.getSongSheetDetail(Number(route.paramMap.get('id')))}

在跳转到歌单详情页面时会先通过路由守卫，守卫此时会调取api获得歌单的信息，组件就能直接使用守卫的返回值，所以在路由配置的时候就要把守卫配进去

sheet-info-routing.moduel.ts

const routes: Routes = [{ path: 'sheetInfo/:id', component: SheetInfoComponent, data: { titel: '歌单详情' }, resolve: { sheetInfo: SheetInfoResolverService } }
];

sheet-info.component.html

<div class="sheet-info wrap feature-wrap"><div class="g-wrap6"><!-- 头部歌单信息 --><div class="m-info clearfix"><div class="cover"><img [src]="sheetInfo.coverImgUrl" [alt]="sheetInfo.name"><div class="mask"></div></div><div class="cnt"><div class="cntc"><div class="hd clearfix"><i class="f-pr"></i><div class="tit"><h2 class="f-ff2">{{sheetInfo.name}}</h2></div></div><div class="user f-cb"><a class="face" [hidden]="!sheetInfo.creator" [href]="'//music.163.com/artist?id=' + sheetInfo.userId"><img [src]="sheetInfo.creator?.avatarUrl" [alt]="sheetInfo.creator?.nickname"></a><span class="name"><a [href]="'//music.163.com/artist?id=' + sheetInfo.userId"class="s-fc7">{{sheetInfo.creator?.nickname}}</a></span><span class="time s-fc4">{{sheetInfo.createTime | date: 'yyyy-MM-dd'}}创建</span></div><div class="btns"><nz-button-group class="btn"><button class="play" nz-button nzType="primary"><i nz-icon nzType="play-circle" nzTheme="outline"></i>播放</button><button class="add" nz-button nzType="primary">+</button></nz-button-group><button class="btn like" nz-button><span>收藏</span>({{sheetInfo.subscribedCount}})</button><button class="btn share" nz-button><span>分享</span>({{sheetInfo.shareCount}})</button></div><div class="tags clearfix"><span>标签</span><div class="tag-wrap"><nz-tag *ngFor="let item of sheetInfo.tags">{{item}}</nz-tag></div></div><div class="intr f-brk"><p *ngIf="controlDesc.isExpand" [innerHTML]="description.long"></p><p *ngIf="!controlDesc.isExpand" [innerHTML]="description.short"></p></div><div class="expand" *ngIf="description.long" (click)="toggleDesc()"><span>{{controlDesc.label}}</span><i nz-icon [nzType]="controlDesc.iconCls" nzTheme="outline"></i></div></div></div></div><!-- 歌单列表信息 --><div class="wy-sec"><div class="u-title wy-sec-wrap clearfix"><h3 class="wy-sec-tit"><span class="f-ff2">歌曲列表</span></h3><span class="sub s-fc3">{{sheetInfo.tracks.length}}首歌</span><div class="more s-fc3">播放：<strong class="s-fc6">{{sheetInfo.playCount}}</strong>次</div></div><!-- 表格信息 --><nz-table class="wy-table" #basicTable [nzData]="sheetInfo.tracks" [nzFrontPagination]="false" nzBorderednzNoResult="暂无音乐!"><thead><tr><th nzWidth="80px"></th><th>标题</th><th nzWidth="120px">时长</th><th nzWidth="80px">歌手</th><th>专辑</th></tr></thead><tbody><tr *ngFor="let item of basicTable.data; index as i"><td class="first-col"><span>{{i + 1}}</span><i class="ico play-song" title="播放"></i></td><td class="song-name"><a> {{item.name}}</a></td><td class="time-col"><span>{{item.dt / 1000 | formatTime}}</span><p class="icons"><i class="ico add" title="添加"></i><i class="ico like" title="收藏"></i><i class="ico share" title="分享"></i></p></td><td><ng-container *ngFor="let singer of item.ar; last as isLast"><a>{{singer.name}}</a><em [hidden]="isLast">/</em></ng-container></td><td>{{item.al.name}}</td></tr></tbody></nz-table></div></div>
</div>

sheet-info.component.ts

    sheetInfo: SongSheet; // 歌单列表// 歌单描述description = {short: '',long: ''}// 动态展开controlDesc = {isExpand: false,label: '展开',iconCls: 'down'}constructor( private route: ActivatedRoute) { }ngOnInit () {this.route.data.pipe(map(res => res.sheetInfo)).subscribe(res => {this.sheetInfo = res;if (res.description) {this.changeDesc(res.description)}})}// 处理歌单描述private changeDesc (desc: string) {if (desc.length < 99) {this.description = {short: this.replaceBr('<b>介绍： </b>' + desc),long: ''}} else {this.description = {short: this.replaceBr('<b>介绍： </b>' + desc.slice(0, 99)) + '...',long: this.replaceBr('<b>介绍： </b>' + desc)}}}// 替换换行符private replaceBr (str: string): string {return str.replace(/\n/g, '<br />');}// 展开折叠toggleDesc () {this.controlDesc.isExpand = !this.controlDesc.isExpand;if (this.controlDesc.isExpand) {this.controlDesc.label = '收起';this.controlDesc.iconCls = 'up'} else {this.controlDesc.label = '展开';this.controlDesc.iconCls = 'down'}}

点击列表图片，将会获取到歌单的ID，此时在跳向详情页之前通过路由守卫得到当前歌单的信息，之后再将直观的信息渲染到页面。

在歌单描述的字段上，关于展开折叠的数据显示并是使用ngIf指令来动态显示。

我以为获取歌单信息不用改，看了返回数据后才发现之前用的也是改后的，所以使用视频里边的数据是不行的，tracks是不够的，仅有三条，所以还是要用trackIDs来获取所有的数据然后在用。

sheet,service.ts

  // 临时更改数据源（获取歌单详情）async getSongSheetDetail2 (id: number) {const tempSheet = this.getSongSheetDetail(id).toPromise();const tempTracks = this.playSheet(id).toPromise();(await tempSheet).tracks = (await tempTracks);return tempSheet;}

sheet-info-resolver.server.ts

 constructor(private sheetServer: SheetService,) { }resolve (route: ActivatedRouteSnapshot) {return this.sheetServer.getSongSheetDetail2(Number(route.paramMap.get('id')))}

写的有问题，数据还是拿不全，trackids内的数据和渲染的数据是不对的，这个问题之前就有，一直搞不明白为什么，这个promise的用法估计也是错的，但是照目前的接口来用的话，数据是可以达到正常的分页量的，这个坑我能挖穿！！

[Angular实战网易云]——20、歌单详情相关推荐

网易云音乐歌单详情列表爬虫破解
这次我跟大家分享的是关于爬虫加密破解的技术! 由于工作开发的需求,后台需要爬取网易云歌单详情页面(http://music.163.com/#/playlist?id=867413461)的歌单歌曲列 ...
音乐歌单Android,[CloudReader]Android - 仿网易云音乐歌单详情页
前段时间模仿网易云音乐UI使用DataBinding做了一个App:CloudReader,今天把其中的类似歌单详情页单独拿出来说一下,我觉得其中还是有些干货的,关联到的知识点还比较有价值,而且也有很 ...
仿网易云android界面,Android - 仿网易云音乐歌单详情页
前段时间模仿网易云音乐UI使用DataBinding做了一个App:CloudReader,今天把其中的类似歌单详情页单独拿出来说一下,我觉得其中还是有些干货的,关联到的知识点还比较有价值,而且也有很 ...
[Angular实战网易云]——15、歌词渲染
歌词歌词初始化播放面板左侧展示歌单歌曲,右侧展示当前歌曲歌词,并且实现和左侧相通的滚动条.因此要根据ID获取当前歌曲歌词. song.service.ts // 根据ID获取歌曲歌词getLyri ...
[Angular实战网易云]——13、底部信息与功能（一）
场景在点击播放音乐之后,歌曲的信息也要渲染到DOM中,其中关于歌曲的时长以及播放的时长也要添加上去.在信息渲染之后还要增加底部的功能,上/下一曲,播放/暂停,以及音量调节和播放模式等步骤歌曲显示 ...
[Angular实战网易云]——10、滑块进度条
场景首页主体样式大致实现,底部样式还有所欠缺,所以底部应加上个别信息与播放的进度条,这个进度条类似Zorro的滑块,点击与滑动,其中包括事件的绑定与组件的嵌套.其中进度条不仅仅实现在歌曲进度上,在音 ...
微信小程序之网易云音乐（五）- 排行详情页、歌单详情页、播放器组件开发
微信小程序之网易云音乐(五)- 排行详情页.歌单详情页.播放器组件开发一. 排行详情页模块二. 歌单详情页模块三. 播放器组件微信小程序之网易云音乐导航一. 排行详情页模块 rank.vue ...
Scrapy 爬取网易云音乐播放量百万以上的歌单以及歌单详情
创建爬虫查看歌单链接 https://music.163.com/#/discover/playlist 用 requests 下载此链接的网页发现不是原网页,应该是被跳转到了登录页面.分析之后得到 ...
Python数据分析初探项目基于Python数据可视化的网易云音乐歌单分析系统大学编程作业（TUST 天津科技大学 2022年）
Python 数据分析初探项目基于 Python 数据可视化的网易云音乐歌单分析系统大学编程作业(TUST 天津科技大学 2022 年) Python 数据分析初探项目基于 Python 数据可 ...

[Angular实战网易云]——20、歌单详情

歌单详情

场景

创建新模块

[Angular实战网易云]——20、歌单详情相关推荐

最新文章

热门文章