javascript - 收到 fcm 推送通知后更新页面上的 View 并且我在同一页面上

Question

我在 Ionic4 中有一个应用程序，它正在接收各种数据更新的 FCM 推送通知。推送工作没有问题，在通知的数据有效负载中我放置了各种标签，然后我在应用程序中使用这些标签根据有效负载更改行为，例如更改我用来管理前台的警报 Controller 的标题和描述通知:

this.FCM.onNotification()
.subscribe( data => {
   if (data.wasTapped) {
     this.router.navigateByUrl(data.mobile_page);
} else {
 this.presentAlertConfirm(data);
//this.router.navigateByUrl(data.mobile_page);
}
});   

[...]

async presentAlertConfirm(data) {

var dataheader;

// Verifico il tipo di messaggio nel payload della notifica push 

if (data.msgtype == 'msg') {
  dataheader = 'Nuovo Messaggio';
}

[...]

var messageurl = data.mobile_page;

const alert = await this.alertController.create({
  header: dataheader,
  message: 'Premere OK per visualizzare',
  buttons: [
    {
      text: 'Ignora',
      role: 'cancel',
      cssClass: 'secondary',
      handler: (blah) => {
        console.log('Confirm Cancel: blah');
      }
    }, {
      text: 'OK',
      handler: () => {
        this.router.navigateByUrl(data.mobile_page);
        console.log('Confirm Okay');
      }
    }
  ]
});

到目前为止，这部分工作没有问题。例如，如果我在应用程序中收到一条新消息，则会出现警报弹出窗口，我可以单击“确定”转到显示消息的页面。 这是我无法自己解决的棘手部分。如果我在消息页面中收到另一条消息，我会收到警报弹出窗口，但即使我单击“确定”，也不会再次呈现 View 并且不会显示新消息。作为一种解决方法，我在页面中添加了一个刷新按钮和一个 ionic 刷新器来完成这项工作，但我想知道是否有可能实现我正在寻找的东西，让新消息显示而无需必须手动单击刷新按钮或向下滑动才能激活 ionic 刷新器。

这是我在消息详细信息页面上的 ngOnInit() 中的代码:

this.badge.clear();
this.getLoggedUserId();
this.getMessageSingleThread(this.route.snapshot.paramMap.get('thread_id'));

getMessageSingleThread 函数在我的网络服务上调用了一个 rest 方法，它是在通知弹出窗口上单击“确定”后应该调用的方法。

我尝试了在这里和其他站点(包括 NgZone)中找到的多种不同解决方案，但没有成功。 我确定我在做一些愚蠢的事情。 到目前为止，所有使用带有 FCM 订阅和重新加载的单个页面的示例，我确信这是一个可行的解决方案，但不适用于我的情况，因为我有一个多页面应用程序，FCM 是在应用程序中编码的。组件.ts.

非常感谢

Answer 1

如评论中所述，一个可能的解决方案(可能不是最好的，但仍然值得实现)是在共享的单例服务上使用Subject，以便能够通知当前订阅该主题的任何 View 已收到新消息。

服务部分涉及声明一个 Subject 并提供一种从中发出值的方法。

从'@angular/core'导入{可注入(inject)}； 从 'rxjs' 导入 { Subject };

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  /**
   * Holds the shared reference of the subject.
   */
  public _OnMessageReceivedSubject: Subject<string>;

  public constructor() {
    // Creates a new subject.
    this._OnMessageReceivedSubject = new Subject<string>();
  }

 /**
 * emits a message. 
 */
  public emitMessageReceived(msg: string): void {
    this._OnMessageReceivedSubject.next(msg);
  }
}

Stackblitz to play with