angular怎么利用service实现自定义服务-mile米乐体育

angular怎么利用service实现自定义服务

这篇文章主要介绍“angular怎么利用service实现自定义服务”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“angular怎么利用service实现自定义服务”文章能帮助大家解决问题。

添加服务

我们在 app/services 中添加 notification.service.ts 服务文件（请使用命令行生成），添加相关的内容：

//notification.service.tsimport{injectable}from'@angular/core';import{observable,subject}from'rxjs';//通知状态的枚举exportenumnotificationstatus{process="progress",success="success",failure="failure",ended="ended"}@injectable({providedin:'root'})exportclassnotificationservice{privatenotify:subject=newsubject();publicmessageobj:any={primary:'',secondary:''}//转换成可观察体publicgetnotification():observable{returnthis.notify.asobservable();}//进行中通知publicshowprocessnotification(){this.notify.next(notificationstatus.process)}//成功通知publicshowsuccessnotification(){this.notify.next(notificationstatus.success)}//结束通知publicshowendednotification(){this.notify.next(notificationstatus.ended)}//更改信息publicchangeprimarysecondary(primary?:string,secondary?:string){this.messageobj.primary=primary;this.messageobj.secondary=secondary}constructor(){}}

是不是很容易理解...

我们将 notify 变成可观察物体，之后发布各种状态的信息。

创建组件

我们在 app/components 这个存放公共组件的地方新建 notification 组件。所以你会得到下面的结构：

notification├──notification.component.html//页面骨架├──notification.component.scss//页面独有样式├──notification.component.spec.ts//测试文件└──notification.component.ts//javascript文件

我们定义 notification 的骨架:

关闭

提醒的内容:{{message}}

{{primarymessage}}

{{secondarymessage}}

接着，我们简单修饰下骨架，添加下面的样式：

//notification.component.scss:host{position:fixed;top:-100%;right:20px;background-color:#999;border:1pxsolid#333;border-radius:10px;width:400px;height:180px;padding:10px;//注意这里的active的内容，在出现通知的时候才有&.active{top:10px;}&.success{}&.progress{}&.failure{}&.ended{}}

success, progress, failure, ended 这四个类名对应 notification service 定义的枚举，可以按照自己的喜好添加相关的样式。

最后，我们添加行为 javascript 代码。

//notification.component.tsimport{component,oninit,hostbinding,ondestroy}from'@angular/core';//新的知识点rxjsimport{subscription}from'rxjs';import{debouncetime}from'rxjs/operators';//引入相关的服务import{notificationstatus,notificationservice}from'src/app/services/notification.service';@component({selector:'app-notification',templateurl:'./notification.component.html',styleurls:['./notification.component.scss']})exportclassnotificationcomponentimplementsoninit,ondestroy{//防抖时间，只读privatereadonlynotification_debounce_time_ms=200;protectednotificationsubscription!:subscription;privatetimer:any=null;publicmessage:string=''//notificationservice枚举信息的映射privatereflectobj:any={progress:"进行中",success:"成功",failure:"失败",ended:"结束"}@hostbinding('class')notificationcssclass='';publicprimarymessage!:string;publicsecondarymessage!:string;constructor(privatenotificationservice:notificationservice){}ngoninit():void{this.init()}publicinit(){//添加相关的订阅信息this.notificationsubscription=this.notificationservice.getnotification().pipe(debouncetime(this.notification_debounce_time_ms)).subscribe((notificationstatus:notificationstatus)=>{if(notificationstatus){this.resettimeout();//添加相关的样式this.notificationcssclass=`active${notificationstatus}`this.message=this.reflectobj[notificationstatus]//获取自定义首要信息this.primarymessage=this.notificationservice.messageobj.primary;//获取自定义次要信息this.secondarymessage=this.notificationservice.messageobj.secondary;if(notificationstatus===notificationstatus.process){this.resettimeout()this.timer=settimeout(()=>{this.resetview()},1000)}else{this.resettimeout();this.timer=settimeout(()=>{this.notificationcssclass=''this.resetview()},2000)}}})}privateresetview():void{this.message=''}//关闭定时器privateresettimeout():void{if(this.timer){cleartimeout(this.timer)}}//关闭通知publicclosenotification(){this.notificationcssclass=''this.resettimeout()}//组件销毁ngondestroy():void{this.resettimeout();//取消所有的订阅消息this.notificationsubscription.unsubscribe()}}

在这里，我们引入了 rxjs 这个知识点，rxjs 是使用 observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。这是一个很棒的库，接下来的很多文章你会接触到它更多的内容。

这里我们使用了 debounce 防抖函数，函数防抖，就是指触发事件后，在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。简单来说：当一个动作连续触发，只执行最后一次。

ps: throttle 节流函数：限制一个函数在一定时间内只能执行一次。

在面试的时候，面试官很喜欢问...

调用

因为这个一个全局的服务，我们在 app.component.html 中调用此组件：

//app.component.html

为了方便演示，我们在 user-list.component.html 中添加按钮，方便触发演示：

//user-list.component.htmlclickshownotification

触发相关的代码：

//user-list.component.tsimport{notificationservice}from'src/app/services/notification.service';//...constructor(privatenotificationservice:notificationservice){}//展示通知shownotification():void{this.notificationservice.changeprimarysecondary('主要信息1');this.notificationservice.showprocessnotification();settimeout(()=>{this.notificationservice.changeprimarysecondary('主要信息2','次要信息2');this.notificationservice.showsuccessnotification();},1000)}

关于“angular怎么利用service实现自定义服务”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。