angular service服务,angular service的作用
本篇文章带大家继续有角的的学习，了解一下有角的怎么利用服务实现自定义服务（通知),希望对大家有所帮助！
在之前的文章中，我们有提到：
比如，我们这篇文章要讲到的通知的实现。【相关教程推荐： 《angular教程》 】
效果图如下：
所以，我们一步步来分解。
添加服务
我们在应用/服务中添加通知。服务。分时（同timesharing）服务文件（请使用命令行生成),添加相关的内容：
//notification.service.ts
从" @角度/核心"导入{内射}；
从" rxjs "导入{可观察，主题}；
//通知状态的枚举
导出枚举通知状态{
进程=进度，
成功=成功，
失败=失败，
Ended=ended
}
@可注射({
提供了："根"
})
导出类通知服务{
private notify:SubjectNotificationStatus=new Subject()；
public messageObj: any={
主要： ,
辅助：""
}
//转换成可观察体
public get notification():ObservableNotificationStatus {
返回这个。通知。asobservable()；
}
//进行中通知
公共showProcessNotification() {
这个。通知。下一步(通知状态.流程)
}
//成功通知
public showSuccessNotification(){
这个。通知。下一步(通知状态.成功)
}
//结束通知
public showEndedNotification() {
这个。通知。下一步(通知状态.已结束)
}
//更改信息
公共变化初级次级(初级？字符串，次要？字符串){
这个。消息对象。初级=初级；
这个。消息对象。次要=次要
}
构造函数(){ }
}是不是很容易理解.
我们将通知变成可观察物体，之后发布各种状态的信息。
创建组件
我们在应用程序/组件这个存放公共组件的地方新建通知组件。所以你会得到下面的结构：
通知
notification.component.html//页面骨架
通知。component.scss //页面独有样式
通知。component.spec.ts //测试文件
通知。component.ts //javascript文件我们定义通知的骨架：
！notification.component.html
！-支持手动关闭通知-
按钮（单击)=closeNotification()关闭/按钮
氕提醒的内容：{{ message }}/h1
！-自定义重点通知信息-
p{{ primaryMessage }}/p
！-自定义次要通知信息-
p{{ secondaryMessage }}/p接着，我们简单修饰下骨架，添加下面的样式：
//notification.component.scss
：主机{
位置：固定；
顶：-100%;
右：20px
背景色：# 999;
边框：1px纯色# 333;
边框半径：10px
宽度：400像素
高度：180像素
填充：10px
//注意这里的活跃的的内容，在出现通知的时候才有。活动{
top:10px；
}。成功{}。进度{}。失败{}。已结束{}
}成功，进步，失败，结束这四个类名对应通知服务定义的枚举，可以按照自己的喜好添加相关的样式。
最后，我们添加行为爪哇岛描述语言代码。
//notification.component.ts
从" @角度/核心"导入{ Component，OnInit，HostBinding，on destroy }。
//新的知识点rxjs
从" rxjs "导入{订阅}；
从" rxjs/运算符"导入{ de反弹时间}；
//引入相关的服务
从“服务请求/应用程序/服务/通知。服务"导入{ NotificationStatus，通知服务}。
@组件({
选择器："应用程序通知",
templateUrl:“”./notification.component.html ，
样式URL:[ ./notification.component.scss]
})
导出类通知组件实现OnInit，OnDestroy {
//防抖时间，只读
私有只读通知_ de bounce _ TIME _ MS=200
受保护的通知订阅！订阅；
私有定时器：任何=空
公共消息：string=
//通知服务枚举信息的映射
私有反射bj: any={
进度： 进行中，
成功： 成功，
失败： 失败，
结束时间： 结束
}
@主机绑定( class )通知CSS class=
公共primaryMessage！字符串；
公共辅助消息！字符串；
构造器（
私有通知服务：通知服务
) { }
ngOnInit(): void {
this.init()
}
public init() {
//添加相关的订阅信息
这个。通知订阅=this。通知服务。获取通知()。管道（
去抖时间（这个。通知_去抖_时间_毫秒)
)。订阅((通知状态：通知状态)={
if(notificationStatus) {
这个。重置超时()；
//添加相关的样式
这个。通知CSS class= active $ { notification status }
这个。消息=这个。反映bj[通知状态]
//获取自定义首要信息
这个。主要信息=这个。通知服务。消息对象。初级；
//获取自定义次要信息
这个。次要消息=这个。通知服务。消息对象。中学；
if(通知状态===通知状态.流程){
this.resetTimeout()
this.timer=setTimeout(()={
this.resetView()
}, 1000)
}否则{
这个。重置超时()；
this.timer=setTimeout(()={
this.notificationCssClass=
this.resetView()
}, 2000)
}
}
})
}
private resetView(): void {
this.message=
}
//关闭定时器
private resetTimeout(): void {
if(this.timer) {
clearTimeout(this.timer)
}
}
//关闭通知
public closeNotification() {
this.notificationCssClass=
this.resetTimeout()
}
//组件销毁
ngOnDestroy(): void {
这个。重置超时()；
//取消所有的订阅消息
这个。通知订阅。取消订阅()
}
}在这里，我们引入了rxjs这个知识点，RxJS是使用看得见的的响应式编程的库，它使编写异步或基于回调的代码更容易。这是一个很棒的库，接下来的很多文章你会接触到它更多的内容。
这里我们使用了去抖防抖函数，函数防抖，就是指触发事件后，在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。简单来说：当一个动作连续触发，只执行最后一次。
在面试的时候，面试官很喜欢问.
调用
因为这个一个全局的服务，我们在app.component.html中调用此组件：
//app.component.html
路由器出口/路由器出口
应用程序通知/应用程序通知为了方便演示，我们在user-list.component.html中添加按钮，方便触发演示：
//user-list.component.html
按钮（单击)=showNotification()单击显示通知/按钮触发相关的代码：
//用户列表。组件。分时（同timesharing）
从“服务请求/应用程序/服务/通知。服务"导入{通知服务}；
//.
构造器（
私有通知服务：通知服务
) { }
//展示通知
showNotification(): void {
这个。通知服务。changeprimarysecondary( 主要信息1);
这个。通知服务。showprocessnotification()；
setTimeout(()={
这个。通知服务。changeprimarysecondary( 主要信息2, 次要信息2);
这个。通知服务。showsuccessnotification()；
}, 1000)
}至此，大功告成，我们成功模拟了通知的功能。相关的服务组件我们可以按照实际的需求进行修改，满足业务需求自定义。如果我们是开发内部使用的系统的话，建议使用成熟的用户界面库，它们已经帮我们封装好各种组件和服务，大量节省我们的开发时间。
更多编程相关知识，请访问：编程入门！以上就是有角的利用服务实现自定义服务（通知)的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。