Javascript 在收到fcm推送通知和I';我在同一页上

Javascript 在收到fcm推送通知和I';我在同一页上,javascript,angular,push-notification,reload,ionic4,Javascript,Angular,Push Notification,Reload,Ionic4,我在Ionic4中有一个应用程序,它接收各种数据更新的FCM推送通知。Push工作正常,在通知的数据负载中,我放置了各种标记,然后在应用程序中使用这些标记根据负载更改行为,例如更改用于管理前台通知的警报控制器的标题和说明: this.FCM.onNotification() .subscribe( data => { if (data.wasTapped) { this.router.navigateByUrl(data.mobile_page); } else { th

我在Ionic4中有一个应用程序,它接收各种数据更新的FCM推送通知。Push工作正常,在通知的数据负载中,我放置了各种标记,然后在应用程序中使用这些标记根据负载更改行为,例如更改用于管理前台通知的警报控制器的标题和说明:

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');
      }
    }
  ]
});
到目前为止,这部分工作没有问题。例如,如果我在应用程序中收到一条新消息,则会出现警报弹出窗口,我可以单击“确定”进入显示消息的页面。 这是我自己无法解决的棘手问题。如果我在消息页面中收到另一条消息,则会弹出警报,但即使单击“确定”,视图也不会再次呈现,新消息也不会显示。作为一种解决方法,我在页面中添加了一个刷新按钮和一个离子刷新器来完成这项工作,但我想知道是否有可能实现我所寻找的,即在不必手动单击刷新按钮或向下滑动以激活离子刷新器的情况下显示新消息

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

this.badge.clear();
this.getLoggedUserId();
this.getMessageSingleThread(this.route.snapshot.paramMap.get('thread_id'));
getMessageSingleThread函数调用我的web服务上的rest方法,在单击通知弹出窗口上的OK之后应该调用该方法

我在这里和其他网站(包括NgZone)尝试了一系列不同的解决方案,但运气不佳。 我肯定我在做傻事。 到目前为止,所有使用FCM订阅和重新加载的单个页面的示例,我确信这是一个有效的解决方案,但不适用于我的情况,因为我有一个多页应用程序,FCM在app.component.ts中编码


非常感谢

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

服务部分包括声明一个
主题
,并提供一个方法从中发出值

从“@angular/core”导入{Injectable}; 从'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);
  }
}
@可注入({
providedIn:'根'
})
导出类共享服务{
/**
*保存主题的共享引用。
*/
公共消息接收主题:主题;
公共构造函数(){
//创建一个新主题。
此._OnMessageReceivedSubject=新主题();
}
/**
*发出信息。
*/
公共emitMessageReceived(消息:字符串):无效{
this._OnMessageReceivedSubject.next(msg);
}
}

最聪明的方法是注册一个共享服务,公开一个可观察的或任何你想使用的RXJ类型(也许一个
主题
就足够了)。无论何时收到消息,它都应该在共享服务中引发一个事件,该事件应该在您的移动页面组件中处理。通过这种方式,在任何一种情况下(无论您是否在mobile_页面组件中),该组件都会收到警报,如果该组件当前已注册到Subject/Observable,则它可以手动启动NgOnInit。对我来说,这将是正确的角度方法。为了清楚地了解我在说什么,我做了这个stackblitz游戏:。在本例中,应用程序组件将每隔5秒通过一个主题发出一条消息,测试组件将通过订阅同一主题显示该消息,并进行全局共享(singleton service)。要检查我是否理解您的建议,单击通知中的OK按钮时,我应该调用共享服务,并从通知中获取所需的所有相关数据。同时,我的“消息”页面将有一个对同一服务的活动订阅,因此当新消息到达时将被“通知”,对吗?没错。请注意,在我提供的示例中,当引发
ngondestory
时,订阅将被取消,因此如果订阅不在同一页面上,则不会通知订阅方;否则,它会。通过这种方式,您还可以在其他页面/服务中重用这种机制,以便在收到消息时发出警报。此外,作为最后一个补充说明,请记住该服务应该是单例的,因此我建议您在可注入签名中使用
{providedIn:'root'}
(或将其添加到应用程序提供商中)伙计,您完全救了我一命。非常感谢:-)