notification Angular利用service实现自定义服务( 二 ) _生活百科

在这里，我们引入了 rxjs 这个知识点， RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。这是一个很棒的库，接下来的很多文章你会接触到它更多的内容。
这里我们使用了 debounce 防抖函数，函数防抖，就是指触发事件后，在 n 秒后只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数的执行时间。简单来说：当一个动作连续触发，只执行最后一次。

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

在面试的时候，面试官很喜欢问...
调用
因为这个一个全局的服务，我们在 app.component.html 中调用此组件：
// app.component.html<router-outlet></router-outlet><app-notification></app-notification>为了方便演示，我们在 user-list.component.html 中添加按钮，方便触发演示：
// user-list.component.html<button (click)="showNotification()">click show notification</button>触发相关的代码：
// user-list.component.tsimport { NotificationService } from 'src/app/services/notification.service';// ...constructor( private notificationService: NotificationService) { }// 展示通知showNotification(): void { this.notificationService.changePrimarySecondary('主要信息 1'); this.notificationService.showProcessNotification(); setTimeout(() => { this.notificationService.changePrimarySecondary('主要信息 2', '次要信息 2'); this.notificationService.showSuccessNotification(); }, 1000)}至此，大功告成，我们成功模拟了 notification 的功能。相关的服务组件我们可以按照实际的需求进行修改，满足业务需求自定义。如果我们是开发内部使用的系统的话，建议使用成熟的 UI 库，它们已经帮我们封装好各种组件和服务，大量节省我们的开发时间。
更多编程相关知识，请访问：编程入门！！
以上就是Angular利用service实现自定义服务（notification）的详细内容，更多请关注电脑自学网其它相关文章！