Angular课程:网易云实战课程笔记Day2
相关链接
angular视频课:https://www.bilibili.com/video/BV1iJ411F7Bf?p=3
angular文档:https://angular.cn/guide/setup-local
ng-zorro-antd文档:https://ng.ant.design/docs/getting-started/zh
网易云音乐API:https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi
网易云音乐API github:https://github.com/Binaryify/NeteaseCloudMusicApi
主要内容
-
获取轮播数据
PS D:\postgraduate_data\angular\NeteaseCloudMusicApi-master> npm i 安装依赖
PS D:\postgraduate_data\angular\NeteaseCloudMusicApi-master> node ./app 启动服务
ng g s services/home 创建服务
home.service.ts -->providedIn: ServicesModule(原来为root即appmodule)
新建自定义数据类型(Banner) -
渲染到轮播组件
-
轮播组件封装
小圆点轮播
左右轮播(click事件(wy-carousel.html)-->发射type(wy-carousel.ts)-->
接收事件(home.html)-->……(home.ts))
(@ViewChild)
angular变更检测 -
推荐歌单
getHotTags(): Observable<HotTag[]> { return this.http.get(this.uri + 'playlist/hot') .pipe(map((res: { tags: HotTag[] }) => { return res.tags.sort((x: HotTag, y: HotTag) => { return x.position - y.position; }).slice(0, 5); })); }
share里面写一个歌单的组件:
share下建立wy-ui module: ng g m share/wy-ui
wy-ui下创建组件: ng g c share/wy-ui/single-sheet,首页可以应用<app-single-sheet>
组件
share.module里写一个全局通量的管道playcountpipe,处理播放量,注入到share.module