网易云实战课程笔记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

主要内容

1. 获取轮播数据
   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)

2. 渲染到轮播组件

3. 轮播组件封装
   小圆点轮播
   左右轮播（click事件(wy-carousel.html)-->发射type(wy-carousel.ts)-->
   接收事件(home.html)-->……(home.ts)）
   (@ViewChild)
   angular变更检测

4. 推荐歌单

     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

标签：网易,轮播,Day2,share,笔记,ng,https,angular,wy
来源： https://www.cnblogs.com/yuanyunjing/p/13584549.html