如何将数据从 Service Worker 传递到组件

Question

当我的 Angular 9 应用既在后台又在前台时，我已经设法按照所有说明和教程获取通知，但我正在使用 FCM 传递向我的应用程序发送数据消息以更新实时仪表板。

在我的 app.component 中，我有以下内容：

ngOnInit() {
this.messagingService.requestPermission();
this.message = this.messagingService.currentMessage;

navigator.serviceWorker.addEventListener('message', function(event) {
    console.log('Received a message from service worker: ', event);

    //The below service doesnt exist in this context
    this.messagingService.processMessage(event)

    });
  }

当应用程序在前台时，我可以在我的服务中处理消息，但当应用程序在后台时，我无法将数据导入我的服务。有人可以帮忙吗？

这个问题类似于 this 问题，但显然该问题存在一些问题..

Answer 1

所以我遇到了帮助我解决这个问题的答案。所需要的只是使 addEventListener 成为箭头函数，以便绑定到组件的 this：

ngOnInit() {
this.messagingService.requestPermission();
this.message = this.messagingService.currentMessage;

navigator.serviceWorker.addEventListener('message', (event) => {

    this.messagingService.processMessage(event)

    });
  }

我对 'this' 绑定的理解充其量只是基本的，所以我鼓励您自己阅读..

如何将数据从 Service Worker 传递到组件

How to pass data from Service Worker to Component

firebase-cloud-messaging

angular