Angular项目🎯网易音乐之轮播及推荐歌单
轮播图
服务封装
- 出现端口被占用,打开CMD窗口,输入
netstat -ano
- 然后找到相应端口对应的
PID
,打开任务管理员,点击详细信息关闭即可
- 调用网易云API接口获取轮播图数据:https://binaryify.github.io/NeteaseCloudMusicApi/#/
- 首先创建
HomeService
服务模块,用于处理HTTP请求
1 | ng g s services/home |
- 修改挂载
root
改为ServicesModule
1 | import { Injectable } from '@angular/core'; |
- 将端口封装在
services.module.ts
中
1 | import { InjectionToken, NgModule } from "@angular/core"; |
- 在
services
文件夹下创建data-types
文件夹,再创建common.types.ts
文件,用于定义返回的数据类型
1 | // 定义Banner的数据类型 |
home.service.ts
具体内容如下
1 | import { HttpClient } from "@angular/common/http"; |
获取数据
- 服务封装好后,在
home.component.ts
组件中依赖注入并使用
1 | import { Component, OnInit } from "@angular/core"; |
轮播样式
- 在
home
目录下创建components/wy-carousel
组件,对组件进行二次封装
1 | ng g c pages/home/components/wy-carousel |
1 | <div class="carousel"> |
1 | import { |
- 在
home.component.html
中编写轮播HTML结构
1 | <div class="home"> |
1 | import { Component, OnInit, ViewChild } from "@angular/core"; |
推荐歌单
封装服务
- 首先根据接口在
data-types/common.types.ts
中定义数据格式
1 | // 定义Banner的数据类型 |
- 然后在
home.service.ts
中封装服务
1 | import { HttpClient } from "@angular/common/http"; |
- 在
home.component.ts
组件中使用即可
1 | import { Component, OnInit, ViewChild } from "@angular/core"; |
歌单组件
- 歌单是一种卡片UI形式,大多数地方会使用到。所以可以封装成一个组件。创建一个用于管理自定义UI的模块
1 | ng g m share/wy-ui |
- 然后在
share.module.ts
中导入
1 | import { WyUiModule } from './wy-ui/wy-ui.module' |
- 然后创建歌单组件
1 | ng g c share/wy-ui/single-sheet |
1 | // 在wy-ui.module.ts中导入歌单组件 |
- 然后在
home.componenet.html
中使用
1 | <div class="home"> |
- 父组件把歌单数据传过来,需要接受并展示
1 | import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; |
1 | <ng-container> |
创建管道
- 播放量超过万级,需要进行处理,可以定义一个管道
1 | ng g p share/play-count |
1 | import { Pipe, PipeTransform } from '@angular/core'; |
- 然后在
share.module.ts
中导入导出
1 | import { NgModule } from "@angular/core"; |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小李博客!
评论