Angular2 Service实践

本是古典何须时尚 2022-06-16 03:08 189阅读 0赞

**引言:** 如果说组件系统(Component)是ng2应用的躯体，那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了。组件间通信的其中一种优等选择就是使用服务，在ng1里就有了广泛使用，而ng2保持了服务的全部特性，包括其全局单例与依赖注入。今天就来实践一下ng2的服务(Service)这一利器，来实现一个简单的音乐播放器，重点在于使用服务来进行音频的播放控制与全局范围的调用。

**一、基本项目准备：**

考虑到音频播放是个比较通用的服务，决定将其创建为一个单独的模块**AudioModule**，并且在里面新增音频服务主文件**audio.service.ts**，通用的音频控制中心组件**audio-studio.component.ts**，作为辅助的TS接口文件**play-data.model.ts**与**audio.model.ts**。

最终项目音频部分的目录结构如图所示：

![1107739-20170223174839757-951771538.png][]

**二、创建服务：**

ng2的服务，照官网的说法来解释，其实只是个带有Injectable装饰器的类而已，没有其他任何特殊的定义，所以非常简单，不过定义如此简单的服务却可以完成非常多酷炫的功能。

在TypeScript下定义变量有了public与private的访问级区分，所以定义服务通常套路就是，定义服务内使用的私有变量，在constructor构造函数中进行初始化操作，定义共有方法给服务的消费者使用。

专注于音频播放服务的场景，我们需要的**私有变量**有：

1.音频对象
    　　用于通过JS进行H5音频的播放控制
    2.播放列表数据
    　　服务内部使用的播放列表概念，实际播放音频时都是从此列表中播放音频，服务的消费者可以调用接口来操作此列表
    3.正在播放音频的参数
    　　音频时长，当前进度以及播放模式(随机播放之类)等
    4.播放时的轮询监听变量
    　　用于音频播放过程中自动启动轮询，定时(每秒)更新播放参数，当音频暂停或停止时取消此监听

服务**初始化**时需要做的事情有：

1.创建音频对象
    　　可直接使用document.createElement('audio')，但不需要将其添加到DOM中。
    　　后续的播放控制均使用此对象来操作。
    2.初始化私有变量
    　　私有变量中播放列表是一个数组，成员的参数使用audio.model.ts来规范化，
    　　　　必须包含一个Url参数存放播放源，以及其他可选参数
    　　相同的播放参数也用一个play-data.model.ts来规范化
    3.给音频添加onplay、onpause、onend等播放事件的监听

此服务提供的**公有接口**包括：

1. Toggle(audio)
    判断传入的音频是否已在列表中，已存在则播放或暂停，若不存在则添加进来并播放
    
    2. Add()
    仅添加音频到列表中
    
    3. Remove()
    移除音频出播放列表，需要考虑好移除后对播放队列的影响，比如是否是正在播放的音频被移除等等
    
    4. Next()
    5. Prev()
    　　上一曲与下一曲操作，需要考虑到播放模式
    
    6. Skip()
    　　进行播放进度的跳转
    
    7. PlayList()
    8. PlayData()
    用于暴露服务所维护的两个数据(播放列表与播放参数)，在指令中都是通过这两个接口来呈现数据的

服务的完整代码如下：

![ContractedBlock.gif][] audio.service.ts

**三、使用服务：**

接下来要使用服务了，再ng2中服务也要依赖具体的模块，我们得音频服务依赖的就是自己的音频模块，在模块的provider列表中配置它：

![复制代码][copycode.gif]

@NgModule({
        imports: [ CommonModule, SharedModule ],
        declarations: [ AudioStudioComponent ],
        exports: [ AudioStudioComponent ],
        providers: [ AudioService ]
    })

![复制代码][copycode.gif]

接下来要实现服务的消费者——AudioStudioComponent 了，步骤如下：

![复制代码][copycode.gif]

1.在构造函数中注入服务：
    
    constructor(public audio: AudioService) { }
    
    2.使用Add()方法添加音频：

audio.Add(\{Url: '/assets/audio/唐人街.mp3', Title: '唐人街-林宥嘉',  
Cover: '/assets/img/2219A91D.jpg'\});  
audio.Add(\{Url: '/assets/audio/自然醒.mp3', Title: '自然醒-林宥嘉',  
Cover: '/assets/img/336076CD.jpg'\});

![复制代码][copycode.gif]

Add方法添加的音频如果是列表中仅有的一条音频则会直接播放，所以如此添加两条音频会直接播放第一条音频。

再在组件内实现一个Skip方法用于进度控制：

public Skip(e) {
            this.audio.Skip(e.layerX /
            document.getElementById('audio-total').getBoundingClientRect().width);
        }

现在运行项目：

![1107739-20170223184440101-1492189703.png][]![1107739-20170223184451804-559359311.png][]

音频播放器的样式是崩塌的...因为这个组件是笔者另一个项目中直接copy过来了，在此demo项目中还没加上移动端rem适配，尴尬，不过大概的效果是展现出来了。

完整项目代码放在本人github上: **https://github.com/yitimo/angular2-demo-yitim**

**四、总结：**

总的来说ng2的服务光使用来说难度不高，关键在于如何来完美发挥服务的特性，来做数据共享传递，以及封装网络请求等都是很好的选择。另外本文没有专门去讲服务的一些问题点，但使用服务还是有一些需要注意的地方的，比如只能在单个模块中的provider中声明，尽量保持全局单例，以及在懒加载模块中会创建子注入器等，实际项目中还是要解决一些问题的。

[1107739-20170223174839757-951771538.png]: /images/20220616/1beaf281e12b4e82b7423a051a031e31.png
[ContractedBlock.gif]: /images/20220616/aea5b60175724f209463a49cffd47b2b.png
[copycode.gif]: /images/20220616/d3306bfcefc546159c7c4aa5028421e5.png
[1107739-20170223184440101-1492189703.png]: http://images2015.cnblogs.com/blog/1107739/201702/1107739-20170223184440101-1492189703.png
[1107739-20170223184451804-559359311.png]: /images/20220616/3eab99c23b0f46d4882d32cd9b331a4f.png