1. 首頁 > 生活百科 > >

notification Angular利用service實現自定義服務( 二 )

小知識it知識

在這里， 我們引入了 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）的詳細內容， 更多請關注電腦自學網其它相關文章！

推薦閱讀