歌单详情
场景
在首页和歌单列表页,点击歌单图片能够查看当前歌单的详细信息,包括歌单内的歌曲
创建新模块
ng g m sheet-info --routing
ng 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