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

主要内容

  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

posted @ 2020-08-30 10:22  aguo718  阅读(84)  评论(0编辑  收藏  举报